Как с помощью CSS прижать footer к низу окна браузера

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

Комментарии (155)

  1. Все это кое как работает до тех пор пока на странице не появится абсолютный див с высотой больше высоты страницы.


    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Абсолютный див выше страницы</title>

    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    html {height: 100%;}
    body {
    height: auto !important;
    height: 100%;
    min-height: 100%;
    position: relative;
    }
    #content {
    padding-bottom: 100px;
    border:1px solid red;
    }
    #footer {
    position: absolute;
    bottom: 0;
    height: 80px;
    width:100%;
    border:1px solid green;
    }
    #content:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
    border:1px solid red;
    }
    </style>
    </head>

    <body>
    <div id="content"></div>
    <div style="position:absolute;width:400px;height:2000px;border:1px solid blue;"></div>
    <div id="footer"></div>
    </body>
    </html>

    А вариант Татьяны у меня вообще нигде не заработал нормально, увы…

    • В этом нет ничего удивительного, таково поведение абсолютных блоков, и это не зависит от использования или не использования техники прижатия футера. Зачем вообще может такой блок понадобиться?

      • Ну малоли зачем. Вопрос ведь не об этом. У меня вот появился такой блок с динамическим содержимым. Его и поставить надо в строго определенном месте (поэтому absolute) и содержимое достаточно разнообразное. Иногда случается, что содержимого многовато и футер оказывается выше нижней границы этого блока. Вот ломаю теперь голову…

  2. стрянно.. у меня все заработало..

  3. Ребята, помогите решить эту проблему. Пробовал все предложенные в статье способы, стараясь адаптировать их под свой шаблон, но не получается. Возможно, чего-то не доделал или неверно адаптировал. Максимум — подвал получается прижать книзу, но между ним и контентом получается пустота через всю ширину экрана, не подпадающаю ни под один стиль, соответсвенно ничего не могу с ней поделать. Жаль, что здесь нельзя прикрепить скрин, вы бы увидели. Вот css-код:

    @charset "utf-8";
    /*Code by Fio
    author url: http//www.vonfio.de
    License: Creative Commons Attribution-Share Alike 3.0 Unported License
    */
    p img {padding:10px;}
    ul, ol img {padding:8px;}
    
    h2, h3, h4 {text-align:center; color:#e45702;}
    
    p {text-align:justify;
       font-family:Verdana, Tahoma, Geneva, Helvetica, Arial, sans-serif;
       font-size:14px;
    }
    
    .absent_list {text-align:justify;
    list-style-position:inside;
    list-style-type:upper-roman;}
    
     
    
    body  { 
    	margin: 0px; 
    	padding: 0px;
    }
    
    td, tr {
    	padding: 5px;
    	margin: 0;
    }
    #container {padding-bottom: 0px;
    	margin: 0 auto;
    }
    #background {
    	background-attachment: fixed;
    }
    
    #header  {
    	height: 39px;
    	border-bottom: 2px solid #ffffff;
    	line-height: 39px;
    	background-color: #ffc39d;
    	padding: 3px 15px 0 15px;
    } 
    #header-in  {
    	margin: 0 auto;
    } 
    #date {
    	font-size: 12px;
    	float: left;
    	color: #840813;
    	font-weight: bold;
    	margin-right: 20px;
    }
    #pathway {
    	float: left;
    	color: #fff;
    	font-weight: bold;
    	font-size: 11px;
    	height: 36px;
    	line-height: 36px;
    }
    #pathway a {
    	color: #CCCCCC;
    	height: 36px;
    	line-height: 36px;
    	font-size: 11px;
    }
    #search_out {
    	float: right;
    	background-image: url(../images/search.jpg);
    	background-repeat: no-repeat;
    	width: 270px;
    	height: 35px;
    }
    
    
    #search .button { background-image: url(../images/search-button.jpg);
    		width:51px;
    		height:27px;  
    		background-repeat: no-repeat;
    		float:right;
    		margin-top: 5px; margin-bottom: 4px; margin-left: 6px; margin-right: 5px;
    		color: #FFFFFF;
    		padding-left: 2px;
    		font-family: Tahoma, Arial, Verdana;
    		font-size: 13px;
    		font-weight: bold;
    }
    
    
    #search { }
    
    #search input, 
    #search .inputbox {
    	float: left;
    	margin: 12px 0 7px 50px;
    	background: none;
    	border: none;
    	padding: 0;
    	font-size: 12px;
    }
    #banner_out {
    background-image: url(../images/header_bg.jpg);
    	
    	background-repeat: repeat-x;
    	height: 150px;
    	width: 100%;
    }
    #banner_left {
    background-image: url(../images/header-left.jpg);
    background-repeat: no-repeat;
    	float: left;
    	color: #FFFFFF;
    	height: 150px;
    }
    #banner_right { width: 280px;   background-image: url(../images/header-right.jpg);
    background-repeat: no-repeat;
    	float: right;
    	height: 150px;}
    
    
    .sitetitle {
    	text-indent: 30px;
    	padding-top: 60px;
    	font-size: 24px;
    }
    .sitetitle a {
    	color: #ffffff !important;
    }
    #banner {
    	float: right;
    	padding: 30px 30px 0px 0px;
    }
    #topmenu_out {
    	height: 40px;
    }
    #topmenu_left {
    	height: 40px;
    	background-repeat: no-repeat;
    }
    #topmenu_right {
    	height: 40px;
    	background-repeat: no-repeat;
    	background-position: right;
    }
    #topmenu {
    	height: 40px;
    	color: #fff;
    	text-align: left;
    	margin: 0px 24px;
    	background-repeat: repeat-x;
    }
    #navigation {
    	height: 34px;
    	width: 100%;
    	float: left;
    	margin: 6px 0 0 0;
    }
    #topmenu ul, 
    #topmenu li {
    	display: inline;
    	padding: 0px;
    	margin: 0px;
    	list-style-type: none;
    }
    #topmenu a {
    	color: #840813;
    	float: left;
    	height: 33px;
    	border: none;
    	background: none;
    	font-size: 14px;
    	font-family: Tahoma, Arial, Verdana;
    	padding: 0px 14px;
    	line-height: 33px;
    	font-weight: bold;
    }
    #topmenu  a:hover, 
    #topmenu #active_menu, 
    #topmenu li#current a {
    	text-decoration: none;
    	background-image: url(../images/topmenu_over.jpg);
    	color: #840813;
    	background-repeat: repeat-x;
    	background-position: bottom;
    	background-color: #333333;
    }
    #left_border {
    	width: 100%;
    	text-align: left;
    	background-repeat: repeat-y;
    	margin: 0 auto;
        }  
    #right_border {
    	background-repeat: repeat-y;
    	background-position: right;
    	margin: 0 0 0 10px;
    }
    #maincontent {
    }
    
    #main { 
    	padding: 0 0 10px 0;
    	margin: 0 10px 0 0;
    	background-color:#FFFFFF;
    }
    
    #left_out {
    	width: 188px;
    	float: left;
    	padding: 0;
    	margin: 0 0 10px 0;
    }
    #right_out  {
    	width: 182px;
    	float: right;
    	padding: 0;
    	margin: 0 0 15px 0;
    }
    #left_out ul, #left_out li, #right_out ul, #right_out li {
    	list-style-type: none;
    	padding-left: 3px;
    	margin: 0;
    }
    #left_out ul.menu li a, 
    #left_out ul.menu li#current a, 
    #left_out a.mainlevel,
    #right_out ul.menu li a, 
    #right_out ul.menu li#current a, 
    #right_out a.mainlevel {
    	display: block;
    	height: 25px;
    	line-height: 25px;
    	background-repeat: no-repeat;
    	background-position: left;
    	width: 172px; padding-left: 3px;
    	font-size: 14px;
    !important;
    	font-weight: normal;
    	text-indent: 20px;
    !important;
    }
    #left_out ul.menu a:hover, 
    #right_out ul.menu a:hover,
    #left_out a.mainlevel:hover, 
    #right_out a.mainlevel:hover, 
    #left_out #active_menu, 
    #right_out #active_menu,
    #left_out ul.menu li#current a,
    #right_out ul.menu li#current a {
    	background-image: url(../images/mainlevel_over.gif);
    	text-decoration: none;
    	background-repeat: no-repeat;
    	background-position: left;
    	color: #000000; !important;
    }
    #left_out a.sublevel, 
    #left_out ul.menu li#current li a,
    #left_out ul.menu li li a,
    #left_out ul.menu li li#current a,
    #left_out ul.menu li li#current li a,
    #left_out ul.menu li li li a,
    #right_out a.sublevel, 
    #right_out ul.menu li#current li a,
    #right_out ul.menu li li a,
    #right_out ul.menu li li#current a,
    #right_out ul.menu li li#current li a,
    #right_out ul.menu li li li a {
    	background-repeat: no-repeat;
    	height: 20px;
    	line-height: 20px;
    	background-position: left;
    	text-indent: 20px;
    !important;
    	border: none;
    	display: block;
    }
    #left_out a.sublevel#active_menu,
    #right_out a.sublevel#active_menu,
    #left_out a.sublevel:hover,
    #right_out a.sublevel:hover,
    #left_out ul.menu li#current li a,
    #left_out ul.menu li li#current a,
    #left_out ul.menu li li#current li a,
    #right_out ul.menu li#current li a,
    #right_out ul.menu li li#current a,
    #right_out ul.menu li li#current li a,
    #left_out ul.menu li#current a:hover,
    #right_out ul.menu li#current a:hover,
    #left_out ul.menu li li a:hover,
    #right_out ul.menu li li a:hover{
    	text-decoration: none;
    	background-repeat: no-repeat;
    	background-position: left;
    	color: #000000; !important;
    }
    #left_out .module, 
    #right_out .module, 
    #left_out .moduletable, 
    #right_out .moduletable,
    #left_out .module_menu, 
    #right_out .module_menu, 
    #left_out .module_text,
    #right_out .module_text {
    	background-repeat: repeat-y;
    	margin-top: 5px;
    }
    #left_out .module div, 
    #right_out .module div, 
    #left_out .moduletable div, 
    #right_out .moduletable div,
    #left_out .module_menu div, 
    #right_out .module_menu div,
    #left_out .module_text div,
    #right_out .module_text div {
    	background-position: bottom;
    	background-repeat: no-repeat;
    	width: 182px
    }
    #left_out .module div div, 
    #right_out .module div div, 
    #left_out .moduletable div div, 
    #right_out .moduletable div div,
    #left_out .module_menu div div, 
    #right_out .module_menu div div,
    #left_out .module_text div div,
    #right_out .module_text div div {
    	background-position: top;
    	background-repeat: no-repeat;
    }
    #left_out .module div div div, 
    #right_out .module div div div, 
    #left_out .moduletable div div div, 
    #right_out .moduletable div div div,
    #left_out .module_menu div div div, 
    #right_out .module_menu div div div,
    #left_out .module_text div div div,
    #right_out .module_text div div div{
    	background: none;
    	padding: 5px 5px 10px 5px;
    	overflow: hidden;
    	width: 172px;
    }
    #left_out .module div div div div, 
    #right_out .module div div div div, 
    #left_out .moduletable div div div div, 
    #right_out .moduletable div div div div,
    #left_out .module_menu div div div div, 
    #right_out .module_menu div div div div,
    #left_out .module_text div div div div,
    #right_out .module_text div div div div {
    	padding: 0;
    	margin: 0;
    }
    #left_out h3, 
    #right_out h3 {
    	height: 35px;
    	width: 172px;
    	background-repeat: no-repeat;
    	color: #FFFFFF;
    	line-height: 35px;
    	text-align: center;
    	padding: 0;
    	margin: 0 0 7px 0;
    	font-size: 14px;
    	font-weight: bold;
    }
    #content_outleft, 
    #content_outmiddle, 
    #content_outright {
    	margin: 0 0 10px 0;
    	padding: 5px 0 0 0;
    }
    #content_outleft {
    	margin: 0 0 0 188px;
    }
    #content_outmiddle {
    	margin: 0 188px;
    }
    #content_outright {
    	margin: 0 188px 0 0;
    }
    #content {  
    	margin-bottom:25px;
    	background-repeat: repeat-x;
    	background-position: bottom;
    	width: 100%;  
    }
    
    #content_border_left {
    	background-repeat: repeat-y;
    	background-position: top left;
    }
    #content_border_right {
    	background-repeat: repeat-y;
    	background-position: top right;
    }
    #content_bottom_right {
    	background-repeat: no-repeat;
    	background-position: bottom right;
    }
    #content_bottom_left {
    	background-repeat: no-repeat;
    	background-position: bottom left;
    	padding: 5px 7px 7px 7px; 
    }
    #component {
    	width: 100%;
    	overflow: hidden;
    }
    .user_bg, 
    .user_left, 
    .user_right {
    	height: 148px;
    }
    .user_bg {
    	margin: 0 0 10px 0;
    	padding: 0;
    	background-repeat: repeat-x;
    	width: 100%;
    }
    .user_left {
    	background-repeat: no-repeat;
    	background-position: left top;
    }
    .user_right {
    	background-repeat: no-repeat;
    	background-position: right top;
    }
    .user_bg .topmodule_usertwo {
    	width: 45%;
    	height: 140px;
    	margin: 0px;
    	float: left;
    	padding: 0px;
    }
    .user_bg .topmodule_userone {
    	width: 100%;
    	height: 140px;
    	margin: 0px;
    	float: left;
    	padding: 0px;
    }
    .user_bg ul, 
    .user_bg li {
    	margin: 0px;
    	padding: 0px;
    	list-style-type: square;
    }
    .user_bg th, 
    .user_bg h3 {
    	height: 28px;
    	line-height: 28px;
    	font-size: 14px;
    	color: #FFFFFF;
    	padding: 0px 5px;
    	font-family: Arial, Helvetica, sans-serif;
    	margin: 0 0 5px 0;
    	font-weight: normal;
    }
    .user_bg .user_inside {
    	margin: 5px;
    	height: 136px;
    	overflow: hidden;
    }
    .user_bg .user_inside1 {
    	margin: 5px 5px 5px 15px;
    	height: 136px;
    	overflow: hidden;
    }
    .separator {
    	width: 2%;
    	min-width: 22px;
    	height: 140px;
    	float: left;
    	background-repeat: no-repeat;
    	background-position: top center;
    }
    #user_bottom {
    	padding: 5px 0;
    	background-color: #FFFFFF;
    	margin: 0 10px;
    }
    #user_bottom .user_bg {
    	margin: 0;
    }
    .user_bg .bottom_user, .user_bg .bottom_user1, .user_bg .bottom_user2, .user_bg .bottom_user3 {
    	width: 30%;
    	height: 140px;
    	margin: 0px;
    	float: left;
    	padding: 0px;
    }
    .user_bg .bottom_user1 {
    	width: 100%;
    }
    .user_bg .bottom_user2 {
    	width: 45%;
    }
    .user_bg .bottom_user3 {
    	width: 30%;
    }
    .user_bg .bottom_user1 {
    	width: 30%;
    	height: 140px;
    	margin: 0px;
    	float: left;
    	padding: 0 0 0 15px;
    }
    
    #bottom {
    	height: 30px;
    	text-align: center;
    	overflow: hidden;
    	margin: 0;
    	padding: 0;
    }
    #bottom_right {
    	height: 30px;
    	background-repeat: no-repeat;
    	background-position: bottom right;
    }
    #bottom_left {
    	height: 30px;
    	background-repeat: no-repeat;
    	background-position: bottom left;
    	padding: 0px 30px;
    
    }
    #bottom_bg {
    	height: 30px;
    	background-repeat: repeat-x;
    	background-position: bottom;
    }
    #copy {
    	float: left;
    	font-size: 13px;
    	height: 30px;
    }
    #othermenu {
    	height: 30px;
    	float: right;
    	overflow: hidden;
    	font-size: 11px;
    	font-weight: bold;
    }
    #othermenu_in ul, 
    #othermenu_in li {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	display: inline;
    }
    #othermenu_in {
    	margin-right: -8px;
    	float: right;
    }
    #othermenu_in a {
    	color: #666666;
    	border-right: 1px solid #8B8B8B;
    	padding: 0px 10px;
    	height: 20px;
    }
    .clr {
    	clear:both;
    	height: 0px;
    }
    ul {
    	margin: 0px;
    	padding: 0px 0px 0px 18px;
    	
    } 
    
    a:link { color: #46AC13; text-decoration: underline; font-weight: bold; }
    a:visited { color: #880914; text-decoration: underline; font-weight: bold; }
    a:hover { color: #e45702; text-decoration: underline; font-weight: bold; }
    
    
    
    .button {
    	color: #FFFFFF;
    	padding: 3px 5px;
    	background-image: url(../images/button.jpg);
    	background-repeat: repeat-x;
    	background-color: #42A80F;
    	margin: 0px 0px;
    	border: 1px solid #ACE092;
    	font-family: Tahoma, Arial, Verdana;
    	font-size: 12px;
    	font-weight: bold;
    }
    .inputbox, input {
    	
    }
    .input, img {
    	border: none;
    }
    .search { }
    
    a.readon {
    	background-image: url(../images/readon.gif);
    	background-repeat: no-repeat;
    	height: 24px;
    	width: 120px;
    	color: #FFF !important;
    	float: right;
    	text-indent: 25px; font-size:11px;
    	line-height: 24px;
    	margin: 10px 10px 5px 0;
    }
    .back_button {
    	background-image: url(../images/backbutton.gif);
    	height: 20px;
    	line-height: 20px;
    	width: 102px;
    	text-indent: 25px;
    	color: #FFFFFF;
    	font-weight: bold;
    	font-size: 10px;
    	margin-top: 5px;
    }
    .back_button a:link {
    	color: #FFFFFF;
    }
    #component h1 {
    	font-size: 19px !important;
    }
    #component h2 {
    	font-size: 17px !important;
    }
    #component h3 {
    	font-size: 15px !important;
    }
    #component h4 {
    	font-size: 13px !important;
    }
    #component h5 {
    	font-size: 11px !important;
    }
    .componentheading {
    	background-image: url(../images/componentheading.jpg);
    	height: 31px;
    	line-height: 31px;
    	padding: 0px 10px;
    	color: #840813;
    	font-weight: bold;
    	font-size: 14px;
    	margin: 0 0 10px 0;
    }
    .contentheading, .contentheading a {
    	font-size: 22px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #000000 !important;
    } 
    .contentdescription {
    	padding: 10px;
    } 
    .sectiontableheader {
    	padding: 3px 5px;
    	background-color: #666;
    	color: #FFFFFF;
    	font-size: 15px;
    	color: #FFFFFF;
    }
    .sectiontableentry1, 
    .sectiontableentry2 {
    	background-repeat: repeat-x;
    	height: 26px;
    	line-height: 26px;
    	font-size: 13px;
    	text-indent: 5px; text-align:left;
    	background-position: bottom;
    	background-color: #FFFFFF;
    }
    .createdate, 
    .small {
    	font-size: 10px;
    	color: #999999;
    }
    
    
    td.buttonheading { border:1px solid #ffc3a0;
    			padding-left: 2px;
    			width:20px;
    			float:center;
    			background-color: #f8f8f8;
    }
    
    .blog .contentpaneopen {border-bottom: 1px dashed #e45702; padding-bottom: 0px; margin-bottom: 2px;}
    
    .vneshnyi {width:80%; margin:10px auto;}
    
    .joke {background: url(../images/joke_right.gif) top right no-repeat; text-align:justify; line-height:31px; padding-left:5px;}
    
    .levyi {background: url(../images/joke_left.gif) top left no-repeat; }
    
    

    и index.php

    <?php
    defined( '_JEXEC' ) or die( 'Restricted access' );
    
    $background_repeat = $this->params->get("background_repeat");
    $background_image = $this->params->get("background_image");
    $background_color = $this->params->get("background_color");
    $fontfamily = $this->params->get("fontfamily");
    $fontsize = $this->params->get("fontsize");
    $fontcolor = $this->params->get("fontcolor");
    $linkcolor = $this->params->get("linkcolor");
    $width = $this->params->get("width");
    $show_date = ($this->params->get("showDate", 1) == 1)?"no":"yes";
    $show_pathway = ($this->params->get("showPathway", 1) == 1)?"no":"yes";
    
    ?>
    <!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
    
    <head>
    
    <jdoc:include type="head" />
    
    <?php require("head_includes.php"); ?>
    
    <link href="css/template.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body><div id="wrapper">
    <div id="background">
      <div id="header">
    	<div id="header-in">
            <?php if($show_date == "yes") {?>
            <div id="date"><?php echo JHTML::Date( 'now', '%A, %d.%m.%Y' ); ?></div>
            <?php } ?>
            <?php if($show_pathway == "yes") {?>
            <div id="pathway"><jdoc:include type="module" name="breadcrumbs" /></div>
            <?php } ?>
            <?php if($this->countModules('user4')) : ?>
            <div id="search_out">
            <div id="search"><jdoc:include type="modules" name="user4" style="xhtml" /></div>
            </div>
    		<?php endif; ?>
        </div>
        </div>
        <div class="clr"></div>
        
        <div id="container">
    
    <div id="banner_out">
    <div id="banner_right"></div>
        <div id="banner_left">
            <div class="sitetitle"><a href="<?php echo $this->baseurl; ?>" ><?php echo $mainframe->getCfg('sitename');?></a></div>
        </div>
        <?php if($this->countModules('banner')) : ?>
            <div id="banner"><jdoc:include type="module" name="banners" style="xhtml" /></div>
        <?php endif; ?>
    </div>       
    
    <div class="clr"></div>    
         
    <div id="topmenu_out">
        <div id="topmenu_left">
            <div id="topmenu_right">
                <div id="topmenu">
                    <div id="navigation"><jdoc:include type="modules" name="user3" style="xhtml" /></div>
                </div>
            </div>
        </div>
    </div>
                                
    <div id="left_border">
        <div id="right_border">
            <div id="maincontent">
                <div id="main">
                    <?php if($this->countModules('left')) : ?>
                        <div id="left_out"><jdoc:include type="modules" name="left" style="rounded" /></div>
                    <?php endif; ?>
                    <?php if($this->countModules('right')) : ?>
                        <div id="right_out"><jdoc:include type="modules" name="right" style="rounded" /></div>
                    <?php endif; ?>
                
                    <div id="content_out<?php echo $contentwidth; ?>">
                    
                        <?php if($this->countModules('user1 or user2')) : ?>
                        <div class="user_bg">
                            <div class="user_left">
                                <div class="user_right">
                                <?php if($this->countModules('user1')) : ?>
                                    <div class="topmodule_user<?php echo $topuserwidth; ?>">
                                        <div class="user_inside1"><jdoc:include type="modules" name="user1" style="xhtml" /></div>
                                    </div>
                                <?php endif; ?>
                                <?php if($this->countModules('user2')) : ?>
                                    <div class="separator"></div>
                                    <div class="topmodule_user<?php echo $topuserwidth; ?>">
                                        <div class="user_inside"><jdoc:include type="modules" name="user2" style="xhtml" /></div>
                                    </div>
                                <?php endif; ?>
                                </div>
                            </div>
                        </div>
                        <?php endif; ?>
                        
                        <div id="content">
                            <div id="content_border_right">
                                <div id="content_border_left">
                                    <div id="content_bottom_right">
                                        <div id="content_bottom_left">
                                            <div id="component"><jdoc:include type="component" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    
                    </div>
                    
                </div>
            </div>
        <div class="clr"></div>
                                    
        <?php if($this->countModules('user5 or user6 or user7')) : ?>
        <div id="user_bottom">
            <div class="user_bg">
                <div class="user_left">
                    <div class="user_right">
                    <?php if($this->countModules('user5')) : ?>
                        <div class="bottom_user<?php echo $userwidth; ?>">
                            <div class="user_inside1"><jdoc:include type="modules" name="user5" style="xhtml" /></div>
                        </div>
                    <?php endif; ?>
                    <?php if($this->countModules('user6')) : ?>
                        <div class="separator"></div>
                        <div class="bottom_user<?php echo $userwidth; ?>">
                            <div class="user_inside"><jdoc:include type="modules" name="user6" style="xhtml" /></div>
                        </div>
                    <?php endif; ?>
                    <?php if($this->countModules('user7')) : ?>
                        <div class="separator"></div>
                        <div class="bottom_user<?php echo $userwidth; ?>">
                            <div class="user_inside"><jdoc:include type="modules" name="user7" style="xhtml" /></div>
                        </div>
                    <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
        <?php endif; ?>
        
        </div>
    </div>
    
    
                                
    <div id="bottom">
        <div id="bottom_right">
            <div id="bottom_left">
                <div id="bottom_bg">
                    <div id="copy">&copy; 2010 <?php echo $mainframe->getCfg('sitename');?> | Разработка сайта: <a href="kontakti/administrator/dmitriy.html"><strong>Дмитрий К.</strong></a> <div style="visibility:hidden"><a href="http://www.vonfio.de" style="color:#000000;">Joomla 1.5 Templates</a> by vonfio.de</div></div>
                    <div id="othermenu">
                        <div id="othermenu_in"><jdoc:include type="modules" name="user3" style="xhtml" /></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    </div>
    </div></div>
    </body>
    </html>
    
    • Лучше живой пример покажите.

      • С живым примером боюсь не получится, сайт на лок сервере, на джумле. Шаблон Sunshine, если знаете. Он бесплатный, можно взять отсюда: http://www.joom15.ru/vonfio/sunshine-shablon-so-100-shirinoy-ot-vonfio.html
        У меня не все модули включены, как на скрине, есть только левая и правая колонки и контент, а тех, что на скрине вверху (последние новости и самое популярное) нету. На одной из страниц текста мало, получается что левая и правая колонки длиннее. Короче они отталкивают футер книзу немного, и под левой появляется полоса с фоновым цветом. Так что есть две проблемы: футер посередине экрана и вылезающий фоновый цвет, если контента меньше, чем высота левой или правой колонки. Сайт скоро запускать, а решить не получается. Вот скрин с сайта: http://www.imageup.ru/img160/1317179.jpg

  4. Ребята, неужели никому нет дела, помогите, прошу.

  5. Уже пробовал разные приемы, и с этого сайта, и с других, старался адаптировать к своему шаблону, но видимо где-то делаю ошибку, потому как не получается. Загвоздка наверное в том, что в моем шаблоне применяются закругленные углы. Вобщем буду благодарен за любую помощь…

  6. Наткнулся на задачу сейчас, сижу думаю.
    По второму способу прижимаем футер, все ок, продолжаем верстать.. Футер — 100px в высоту, у футера в верхней части есть фоновая полоска в 20px.

    и тут нам на #content нужно повесить тянущийся фон. И при растягивании страницы по вертикали этот самый фон будет налезать на футер, закрывая своей картинкой оставшиеся у футера 80px.

    Пока не придумал как решить. Буду рад советам.

  7. Михаил
    10 лет назад

    Делал тему на WP
    по книге Игоря Квентора
    http://www.websovet.com/my-books#book2

    нормально не работал рецепт, скажу сразу что все не пробовал,
    а пользовался рекомендациями с книги.

    Все заработало великолепно после того как внизу стилей дописал:

    .clearfloat{
    clear: both;
    }

    Заработало чудесно и настроение улучшилось :)
    http://www.youtube.com/watch?v=eQO9w6qGA-w

  8. СГ АМ,
    работает не корректно. вот из-за таких статей коими наполнен весь инет и теряется драгоценное время(((

  9. Все эти рапрекрасные способы нифига не работают нормально с динамическим контентом, в частности, с той же Джумлой. Практически на всех браузерах футер уезжает х.з. куда при изменении размера окна, иногда и при окне на весь экран.

    • видимо руки вырастил не с того места.
      Первый способ заработал, при том на странице элементы, которые могут менять высоту… И ничего не плывет..

  10. Все ребята работает, залез сюда чтобы вспомнить как это делается )

    Не работает с динамическим контентом )))))) оч смешно. Код кривой не надо писать, чтобы теги незакрытыми оставались в плагинах всяких и все ок будет.
    p.s.Joomla отстой

  11. не понравился ни первый ни второй способ, как то все слишком сложно =\
    как оказалось чтобы прижать футер к низу достаточно прописать в футере

    clear:both;
    margin:0;
    overflow:hidden;

    по крайней мере у меня работает, пример смотреть здесь http://photoshoptemplates.ru/

    • Смешно) Вы похоже не поняли главного: в вашем примере «футер» не прижат к низу. Он просто находится после содержимого страницы. Удалите, к примеру, всё содержимое, кроме «шапки» и увидите где будет ваш «футер». Задача как раз и состояла в том, чтобы при ЛЮБОМ количестве содержимого на странице (даже при его отсутствии) подвал всегда находился бы внизу окна. Поэтому «всё так сложно» )

  12. А я просто хочу поблагодарить автора за внятное, работающее howto. Спасибо. Самокоронованные обсиральщики могли бы и промолчать.

  13. Попробовал 2 способа, пошаманил чутка, футер всегда прижат к «полу» браузера ) Спасибо

  14. Взял копипастом код второго варианта — он НЕ работает в FF, Opera и IE8. Везде одна и та же проблема — футер находится действительно внизу экрана, но если в див контент добавить контент, который длиннее экрана, то футер остается при прокрутке именно там, где пофвился в самом начале, а дальше идет контент.
    мой код:

    <body>
    <div id="content">
    <div id="header">
    </div>
    <div id="main_l">
    </div>
    <div id="main_r">
    </div>
    </div>
    <div id="footer"></div>
    </body>

    css:

    * {
    margin: 0;
    padding: 0;
    }
    html, body {height: 100%;}
    body {
    font-family: Tahoma, Geneva, sans-serif;
    line-height: 1.3em;
    margin: 0px 0px 0px 0px;
    font-size: 14pt;
    color: #423c2a;
    background-color:#c0b67e;
    }
    #content {
    position: relative;
    min-height: 100%;
    margin-left:auto;
    margin-right:auto;
    width:1200px;
    background-color:#e8e1bc;
    background-image:url(../images/top_bg.png);
    background-position:top;
    background-repeat:no-repeat;
    }
    * html #content {
    height: 100%;
    }
    #footer {
    position: relative;
    height: 64px;
    margin-top: -64px;
    width:100%;
    background-color:#000;
    }
    #header {
    height:554px;
    background-image:url(../images/header_bg.png);
    background-position:bottom;
    background-repeat:no-repeat;
    }

    main_l и main_r просто высота например 800px и фоновая заливка чтобы потетстить.

    Если брать просто приведенный во втором варианте код — то все корректно, но если добавить хоть чтото в див контент то структура разваливается

  15. Второй способ проверил под всем работает на ура только с 8 ослом косяк припоставил страницу обрабатывать как 7 ослик все ок стало
    Для тех кто незнает всравляем в head

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

  16. Прочитал, ничего не понял :(. Давно уже хочу прижать футер к низу страницы в своем блоге, но не знаю, как это правильно сделать. Может подскажите? Прям на пальцах для чайника. Буду премного благодарен :). Сайт: http://www.eb-school.ru , сделан на Blogger.

  17. Владимир
    9 лет назад

    Что-то не получается у меня ничего. Или я что-то неправильно делаю, но что именно понять не могу. В общем когда вставляю в DIV «content» другой DIV и задаю ему высоту, скажем, 2000px, то футер так и остается на прежнем месте (т.е. уже не внизу страницы) Вообще как именно нужно вставлять данные в слой content? Может в этом загвоздка?

  18. А меня просто задолбали огромные CSS коды и я написал javascript код, который делает прижатие без использования CSS. Работает даже при высоте страницы от 1 до 1 000 000 пикселей. Вот ссылка javascript прижатие футера.

    Идея скрипта: если сумма высот блока с контентом и футера меньше высоты клиентской части окна — плавающему блоку присваиваем высоту: клиентская высота дисплея — (высота блока контента + футер).

    Иначе — просто задаём высоту плаваюшего блока в, например, 20 пикселей.

  19. Станислав
    9 лет назад

    Автору спасибо. Все заработало.

    А криворуким, которые не могут настроить нормально и орут «не получается» — лучше не позорьтесь.
    Кто писал про джумлу — все там работает, просто шаблон надо делать прямыми руками. И с динамическим содержанием тоже прекрасно работает.

  20. Спасибо автору все работает. У меня вопрос по второму способу. Обязательно ли для блоков #footer и #content свойство

    position: relative;

    . У мня и без него все заработало.

Ваш комментарий