Прижать footer к низу страницы

Статус
Закрыто для дальнейших ответов.
DSL

DSL

Well-Known Member
Регистрация
27.04.2010
Сообщения
121
HTML:
Код: 
<!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>
<title>Вред наркотиков</title>
<meta http-equiv="Content-Type" content="text/html />
<meta charset="windows-1251" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<!-- BEGIN #wrapper -->
<div id="wrapper">
	<div id="centered">
	<!-- BEGIN #Menu -->
	<div id="menu">
		<ul>
		<li><a href="index.html" title="Главная страница"> Главная</a></li>
		<li><a href="" title="Вред наркотиков">Вред наркотиков</a></li>
		<li><a href="" title="Наиболее распространнёные наркотики">Наиболее распространнёные</a></li>
		<li><a href="" title="Реабилитация">Реабилитация</a></li>
		</ul>
	</div><!-- END #Menu -->
	</div>
<div id="footer">
<p>Тратата</p>
</div>
</div>
<!-- END #wrapper -->
</body>
</html>
CSS:
Код: 
html, body {
	height: 100%; 
	margin: 0; 
	padding: 0;
}
body{
	text-align:center;
	font:.8em/1.3 Arial,sans-serif;
	background:#000000;
	display: table; 
	height: 100%; 
	width: 100%;
}
#wrapper {
	display: table-cell; 
	vertical-align: middle;
}
#centered{
	background:url(fon.png) no-repeat;
	width:970px;
	height:358px;
	margin: 0 auto;
}
#menu {
	border:0px solid #fff; 
	padding-top:230px;	
}
#menu ul {
	list-style:none;
	margin:0;
	padding:0;
}
#menu ul li {
	display:inline;
}
#menu ul li a {
	padding:0px 7px 0px 7px;
	font-size:125%;
	text-decoration:none;
	color:#dad8d8;
}
#menu ul li a:hover {
	padding:0px 7px 0px 7px;
	font-size:125%;
	text-decoration:underline;
	color:#ffffff;
}
#footer {
}
#footer p {
	color:#cccccc;
}
Надо прижать его к низу страницы, и так чтобы при уменьшении/увеличении окна браузера он не куда не съезжал.
Помогите :rolleyes:
 
L

lektor925

Новичок
Регистрация
28.04.2011
Сообщения
1
Держи на здоровье

html:
Код: 
<!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>
<title>Вред наркотиков</title>
<meta http-equiv="Content-Type" content="text/html />
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<!-- BEGIN #wrapper -->
<div id="container">
	<div id="wrapper">
			<div id="centered">
			
				 <div id="menu">
						<ul>
						<li><a href="index.html" title="Главная страница"> Главная</a></li>
						<li><a href="" title="Вред наркотиков">Вред наркотиков</a></li>
						<li><a href="" title="Наиболее распространнёные наркотики">Наиболее распространнёные</a></li>
						<li><a href="" title="Реабилитация">Реабилитация</a></li>
						</ul>
				</div> 
			</div>
	</div>		
	 <div id="footer">
		<p>Тратата</p>
	</div>  
</div>
<!-- END #wrapper -->
</body>
</html>

css:

html, body , #container{
        height: 100%;
}
*{
	margin: 0; 
    padding: 0;
}
body{
        background:#000000;
		 text-align:center;
        font:.8em/1.3 Arial,sans-serif;
}
#container{
	margin:auto;
}
#wrapper {
        /*display: table-cell; 
        vertical-align: middle;*/
		min-height:100%;
		margin:0 0 -60px;
		
}
#centered{
        background:url(fon.png) no-repeat;
        width:970px;
        height:358px;
        margin: 0 auto;
		padding-bottom:60px;
}
#menu {
        border:0px solid #fff; 
        padding-top:230px;      
}
#menu ul {
        list-style:none;
        margin:0;
        padding:0;
}
#menu ul li {
        display:inline;
}
#menu ul li a {
        padding:0px 7px 0px 7px;
        font-size:125%;
        text-decoration:none;
        color:#dad8d8;
}
#menu ul li a:hover {
        padding:0px 7px 0px 7px;
        font-size:125%;
        text-decoration:underline;
        color:#ffffff;
}
#footer {
	height:60px;
}
#footer p {
        color:#cccccc;
}
Высоту футера если будешь менять, меняй также margin в #wrapper и padding-bottom в #centered
 
  • Like
Реакции: DSL
DSL

DSL

Well-Known Member
Регистрация
27.04.2010
Сообщения
121
Да, эти варианты прижимают футер к низу, но при изменении размеров окна футер наезжает на контент
Вот скрин:
357403298.png

Может надо код в корне изменить? :unsure:
Но должно быть так:
357403176.png

Прошу помощи :rolleyes:
 
BaNru

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 153
Если используешь jquery, могу предложить на нем вариант.
Код: 
$(document).ready(function(){
$("#content").height($(window).height()-$('#header').height()-$('#footer').height()-"34");
});
В данном примере задаем высоту content (основной части).
-"34" можно убрать, оно для корректировки.
Можно упростить. Если хедер и футер известной величины, и они не измены, то
Код: 
$("#content").height($(window).height()-"134");
Где суммарная высота хедера и футера.

Так же, если контент может приобретать и большие размеры, то можно ввести проверку. (далее код пишу "на глаз", знатоки JS поправьте если допущу ошибку)
Код: 
$(document).ready(function(){
var a = $(window).height()-"134";
var b = $("#content").css('height');
if (a > b){$("#content").height($(window).height()-"134");}
});
UPD
Посмотрел твои картинки...
А просто bottom: 0 и position: absolute (по необходимости)не помогают?
 
marker

marker

Well-Known Member
Регистрация
23.10.2010
Сообщения
399
не забудь задать документу, телу и главному блоку полную высоту

Код: 
html, body {height:100%;min-height:100%;}
#wrapper, #container {
        vertical-align: bottom;
        height:auto !important;
        min-height:100%;
        height:100%;
}
Internet Explorer не воспринимает !important, поэтому height для него будет 100%

Код: 
        height:auto !important;
        min-height:100%;
        height:100%;
 
DSL

DSL

Well-Known Member
Регистрация
27.04.2010
Сообщения
121
marker
Тогда всё съезжает к низу, не только футер.
 
tigra60

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
Зачем изобретать велосипед? Воспользуйтесь генератором шаблонов. Там есть опция "прижать футер". Если интересно, посмотрите, как это сделано там.
 
  • Like
Реакции: DSL
DSL

DSL

Well-Known Member
Регистрация
27.04.2010
Сообщения
121
tigra60
Спасибо!
И всем остальным тоже спасибо!

Проблема решена! :rolleyes: :laugh:
 
Статус
Закрыто для дальнейших ответов.

Онлайн статистика

Пользователи онлайн
0
Гости онлайн
88
Всего посетителей
88
Общее число может включать скрытых пользователей.

Статистика форума

Темы
10 933
Сообщения
64 098
Пользователи
12 697
Новый пользователь
House

Новые пользователи

Поделиться этой страницей

Верх Низ