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

161 комментарий

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

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

Vit
14 лет 3 месяца назад

Все это кое как работает до тех пор пока на странице не появится абсолютный див с высотой больше высоты страницы.
<!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>
А вариант Татьяны у меня вообще нигде не заработал нормально, увы…
- Dimox
  14 лет 3 месяца назад / ответ на коммент Vit
  
  В этом нет ничего удивительного, таково поведение абсолютных блоков, и это не зависит от использования или не использования техники прижатия футера. Зачем вообще может такой блок понадобиться?
  - Vit
    14 лет 3 месяца назад / ответ на коммент Dimox
    
    Ну малоли зачем. Вопрос ведь не об этом. У меня вот появился такой блок с динамическим содержимым. Его и поставить надо в строго определенном месте (поэтому absolute) и содержимое достаточно разнообразное. Иногда случается, что содержимого многовато и футер оказывается выше нижней границы этого блока. Вот ломаю теперь голову…
Татьяна
14 лет 3 месяца назад

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

Дима

14 лет 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>

Dimox
14 лет 3 месяца назад / ответ на коммент Дима

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

Дима
14 лет 2 месяца назад

Ребята, неужели никому нет дела, помогите, прошу.
- Татьяна
  14 лет 2 месяца назад / ответ на коммент Дима
  
  Дмитрий, попробуйте примеры уже приведенные на сайте, особое внимание обратите на css
Дима
14 лет 2 месяца назад

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

Наткнулся на задачу сейчас, сижу думаю.
По второму способу прижимаем футер, все ок, продолжаем верстать.. Футер – 100px в высоту, у футера в верхней части есть фоновая полоска в 20px.
и тут нам на #content нужно повесить тянущийся фон. И при растягивании страницы по вертикали этот самый фон будет налезать на футер, закрывая своей картинкой оставшиеся у футера 80px.
Пока не придумал как решить. Буду рад советам.
Михаил
14 лет 2 месяца назад

Делал тему на WP
по книге Игоря Квентора
http://www.websovet.com/my-books#book2
нормально не работал рецепт, скажу сразу что все не пробовал,
а пользовался рекомендациями с книги.
Все заработало великолепно после того как внизу стилей дописал:
.clearfloat{
clear: both;
}
Заработало чудесно и настроение улучшилось :)
http://www.youtube.com/watch?v=eQO9w6qGA-w
- Михаил
  13 лет -1 месяц назад / ответ на коммент Михаил
  
  истину глаголишь, тезка :) вставил clearfloat и сразу перестало все плыть :)
vit
14 лет назад

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

Все эти рапрекрасные способы нифига не работают нормально с динамическим контентом, в частности, с той же Джумлой. Практически на всех браузерах футер уезжает х.з. куда при изменении размера окна, иногда и при окне на весь экран.
- Станислав
  13 лет 1 месяц назад / ответ на коммент Алекс
  
  видимо руки вырастил не с того места.
  Первый способ заработал, при том на странице элементы, которые могут менять высоту… И ничего не плывет..
Rantie
13 лет 8 месяцев назад

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

не понравился ни первый ни второй способ, как то все слишком сложно =\
как оказалось чтобы прижать футер к низу достаточно прописать в футере
clear:both; margin:0; overflow:hidden;
по крайней мере у меня работает, пример смотреть здесь http://photoshoptemplates.ru/
- Роман
  13 лет 6 месяцев назад / ответ на коммент alex
  
  Смешно) Вы похоже не поняли главного: в вашем примере “футер” не прижат к низу. Он просто находится после содержимого страницы. Удалите, к примеру, всё содержимое, кроме “шапки” и увидите где будет ваш “футер”. Задача как раз и состояла в том, чтобы при ЛЮБОМ количестве содержимого на странице (даже при его отсутствии) подвал всегда находился бы внизу окна. Поэтому “всё так сложно” )
root333
13 лет 5 месяцев назад

А я просто хочу поблагодарить автора за внятное, работающее howto. Спасибо. Самокоронованные обсиральщики могли бы и промолчать.
- Сергей
  13 лет 2 месяца назад / ответ на коммент root333
  
  Согласен.
Владимир
13 лет 5 месяцев назад

Попробовал 2 способа, пошаманил чутка, футер всегда прижат к “полу” браузера ) Спасибо
DRey
13 лет 4 месяца назад

Взял копипастом код второго варианта – он НЕ работает в 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 и фоновая заливка чтобы потетстить.
Если брать просто приведенный во втором варианте код – то все корректно, но если добавить хоть чтото в див контент то структура разваливается
- Dimox
  13 лет 4 месяца назад / ответ на коммент DRey
  
  Протестировал ваш код – описанной вами проблемы не наблюдаю, у меня работает, как надо.
KLS
13 лет 3 месяца назад

Второй способ проверил под всем работает на ура только с 8 ослом косяк припоставил страницу обрабатывать как 7 ослик все ок стало
Для тех кто незнает всравляем в head
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
Лев
13 лет 3 месяца назад

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

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

А меня просто задолбали огромные CSS коды и я написал javascript код, который делает прижатие без использования CSS. Работает даже при высоте страницы от 1 до 1 000 000 пикселей. Вот ссылка javascript прижатие футера.
Идея скрипта: если сумма высот блока с контентом и футера меньше высоты клиентской части окна – плавающему блоку присваиваем высоту: клиентская высота дисплея – (высота блока контента + футер).
Иначе – просто задаём высоту плаваюшего блока в, например, 20 пикселей.
- Станислав
  13 лет 1 месяц назад / ответ на коммент Александр
  
  А если у меня выключен js, то как себя ведет футер? И смысл нагружать js, если можно сделать более простым css
  - qweasd
    11 лет 7 месяцев назад / ответ на коммент Станислав
    
    Посмотрите статистику, у многих людей отключен javascript?
Станислав
13 лет 1 месяц назад

Автору спасибо. Все заработало.
А криворуким, которые не могут настроить нормально и орут “не получается” – лучше не позорьтесь.
Кто писал про джумлу – все там работает, просто шаблон надо делать прямыми руками. И с динамическим содержанием тоже прекрасно работает.
Василий
13 лет 1 месяц назад

Спасибо автору все работает. У меня вопрос по второму способу. Обязательно ли для блоков #footer и #content свойство
position: relative;
. У мня и без него все заработало.
- Dimox
  13 лет 1 месяц назад / ответ на коммент Василий
  
  Я уже и не помню, для чего добавлял это свойство. Если без него нет проблем, тогда можно и не использовать.

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

Смотрите также

FireFox и вертикальное выравнивание текста в input[submit]

10 фиксов, решающих проблемы Internet Explorer 6

Верстаем кроссбраузерный “резиновый” макет страницы

Цвет курсора в поле input и кроссбраузерность

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

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