Как же расположить footer в нижней части сайта

@the112 · Регистрация: 14.05.2014

Author24 — интернет-сервис помощи студентам

Всем привет. В ситуации когда контента на странице нет(или очень мало) - футер всплывает на середину страницы(а хотелось бы видеть его внизу, даже если нет контента). Перерыл все.. нашел только фиксированный футер, который ложится поверху контента, когда его много..

Как же расположить footer в нижней части сайта

@fol · 28.10.2014, 10:50

вот так

@the112 · 28.10.2014, 14:04 **[ТС]**

Не получилось.. вот код:

HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
{headers}
<link rel="shortcut icon" href="{THEME}/images/favicon.ico" />
<meta charset="windows-1251">
    <meta name="author" content="">
 
    <title>xxxxxxxxxxxxxxxx</title>
 
    <!-- Bootstrap core CSS -->
    <link href="{THEME}/css/bootstrap.css" rel="stylesheet">
    <link href="{THEME}/css/non-responsive.css" rel="stylesheet">
 
    <!-- Custom CSS for the 'thebeatmakers.ru' Template -->
    <link href="{THEME}/css/3-col-portfolio.css" rel="stylesheet">
         <!-- Login panel form -->
        <link rel="stylesheet" href="{THEME}/css/stylelogin.css" media="screen" type="text/css" />
        <link rel="stylesheet" href="{THEME}/css/engine.css" media="screen" type="text/css" />
    <script src="{THEME}/js/prefixfree.min.js"></script>
        <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
 <script src="{THEME}/js/likes.js"></script>
 <script src="{THEME}/uppod/uppod.js" type="text/javascript"></script>
 <script src="{THEME}/uppod/uppod_full.js" type="text/javascript"></script>
 [aviable=main|cat]
<script>
/*LiveLoad Admin-club.ru*/
var stopMe = false;
$(document).ready(function (){
    $(this).scroll(function(){
        if(!stopMe && $('#live-load-news').offset().top+$('#live-load-news').height()-$(window).scrollTop() < $(window).height() ){
            LiveLoad();
        }
    })
});
var CountAjax = 0;
function LiveLoad() {
    if(CountAjax == 0) {
        CountAjax++;
        $('#live-load-active').show(200);
        $.post(window.location, {liveload:1}, function(data){
            $('#live-load-active').hide(200);
            if(data == "no" || !data || data == ""){
                stopMe = true;
                $(document).unbind('scroll');
            }else{
                $("#live-load-news").append(data);
                CountAjax = 0;
                $(document).scroll();
            }
        
        });        
    }
}
/*end of code LiveLoad*/
</script>
[/aviable]
 <script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 400) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>
 
 
<style type="text/css">
* {margin: 0; padding: 0;} /* обнуляем отступы */
body {
 
}
html,body {
height: 100%; /* задаем высоту тела документа */
}
.row { /* основной блок, который должен растянуться до подвала */
 
min-height: 90%; /* задаем минимальную высоту основного блока */
}
* html .main { /* хак для ie6 */
height: 100%; /* для ие6, т.к. не понимает min-height */
}
.hFooter { /* это распорка в основном блоке - резервируем место для подвала */
height: 40px; /* высота нашего подвала */
}
.footer { /* подвал */
background: #0000CC; /* цвет фона подвала (для наглядности) */
color: #fff;
height: 40px; /* высота подвала */
margin-top: -40px; /* делаем отрицательный отступ по высоте равный высоте подвла, чтобы четко вписаться в размер экрана */
}
</style>
 
 
 
</head>
 
 
 
{AJAX}
{include file="fast_pm.tpl"}
<body>
 
 
    <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a href="/">
                <img border="0" src="{THEME}/images/logo.png" width="50" height="50"></a>&nbsp;&nbsp;&nbsp;
            </div>
 
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li>[group=5]<a href="/index.php?do=register">Регистрация</a>[/group]</li>
                    <li>[not-group=5] 
                    </li>
                    <li><a href="/index.php?do=cat&category=microblogs">Микроблоги</a> 
                    </li>
                    <li><a href="/index.php?do=about">О проекте</a> 
                    </li>
                    
                    <li>[mod_faq]F.A.Q.[/mod_faq]
                    </li>
                    [/not-group]</li>
                    <li><span lang="en-us">{login}</span></li>
                    
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
 
    <div class="container">
 
        <div class="row">
 
            &nbsp;</div>
 
        <div class="row">
 
            <div id="stick_menu" class="col-md-1 portfolio-item"  >
                <p align="justify">Google ads:</p>
                <p align="justify"><span lang="en-us">{google_ads}</span></p>
            </div>
 
 
 
 
 
 
 
 
<div class="col-md-4">{info}{content}
[aviable=main|cat]
<div id="live-load-news"></div>
<div id="live-load-active" style="display:none; text-align:center">Подгрузка контента..</div>
[/aviable]
 
</div>
 
 
        
 
<table>
    <tr>
        <td class="col-md-5">
        <div class="col-md-3" >топ xxxxxxx:{include file="engine/modules/utop/block.php"}</div>
        </td>
    </tr>
    
    <tr>
        <td height="10">
        </td>
    </tr>
    
    <tr>
        <td class="col-md-5">
        <div class="col-md-2" ><font color="#FFFFFF">топ xxxxxxxxx на сайте:</font>
        
 
        {topnews}
        </div>
        </td>
    </tr>
</table>
 
 
        
 
 
 
     
 
        
      <div class="row">
 
            <div class="col-md-1 portfolio-item">
                &nbsp;<h3>&nbsp;</h3>
              
            </div>
 
            
 
        </div> 
        
        
        
        
        
        
        
        
 
    </div>
    <!-- /.container -->
 
    <div class="footer">
Copyright <font face="Arial">©</font> xxxxxxxxx.ru | xxxxxxxxxxxxxxx. 2014. All rights reserved. <a href="/index.php?do=lostpassword">
<font color="#333333" size="1"><span style="text-decoration: none">Забыли пароль?</span></font></a>
            </div>
 
   <div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span></div>
   
 
{include file="/engine/ajax/fpm/fast_pm.php"}<p>
<div class="container1">
 
 </div>
</body>
</html>

@temkasky · 11.11.2014, 00:20

во первых убрать css код из

Код

<head>***</head>

и запилить его в style.css вашего шаблона без

Код

<style>***</style>

во вторых подстроить все блоки(классы и id) под свой шаблон, и особенно внимательно проследить за этими тегами

CSS

1
2
3

html,body {
height: 100%; /* задаем высоту тела документа */
}

а вообще вам в раздел - CSS

@the112 9 / 9 / 4 Регистрация: 14.05.2014 Сообщений: 180
		1
	Как же расположить footer в нижней части сайта 28.10.2014, 09:56. Показов 1655. Ответов 3 Метки нет (Все метки) Всем привет. В ситуации когда контента на странице нет(или очень мало) - футер всплывает на середину страницы(а хотелось бы видеть его внизу, даже если нет контента). Перерыл все.. нашел только фиксированный футер, который ложится поверху контента, когда его много.. 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	28.10.2014, 10:50	2
	вот так 0

	11.11.2014, 00:20