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

Содержание: Вступление Первый способ Второй способ Третий способ Четвертый способ Пятый способ (самый актуальный) к содержанию ↑Вступление Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая — как прижать ...

Комментарии (139)
  1. 1
    Vit
    @

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


    <!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>

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

    • 2

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

      • 3
        Vit
        @

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

  2. 4
    Татьяна

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

  3. 5
    Дима

    Ребята, помогите решить эту проблему. Пробовал все предложенные в статье способы, стараясь адаптировать их под свой шаблон, но не получается. Возможно, чего-то не доделал или неверно адаптировал. Максимум — подвал получается прижать книзу, но между ним и контентом получается пустота через всю ширину экрана, не подпадающаю ни под один стиль, соответсвенно ничего не могу с ней поделать. Жаль, что здесь нельзя прикрепить скрин, вы бы увидели. Вот 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>
    
      • 7
        Дима

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

  4. 9
    Дима

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

  5. 11
    Дима

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

  6. 13
    splean

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

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

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

  7. 14
    Михаил
    @

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

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

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

    .clearfloat{
    clear: both;
    }

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

  8. 16
    vit

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

  9. 17
    Алекс
    @

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

  10. 19
    Rantie

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

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

  11. 20
    alex

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

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

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

    • 21

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

  12. 22
    root333
    @

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

  13. 24
    Владимир

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

  14. 25
    DRey
    @

    Взял копипастом код второго варианта — он НЕ работает в 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. 27
    KLS

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

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

  16. 28

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

  17. 29
    Владимир

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

  18. 30

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

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

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

  19. 33
    Станислав

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

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

  20. 34
    @

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

    position: relative;

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

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