Резина по высоте проблема с футером

okunev2 · July 16, 2011

При уменьшении по высоте окна браузера, футер почему-то наезжает на центральную часть. Не пойму как поправить код чтобы не наезжало, и при уменьшении по высоте, просто футер сдвигался вниз, а так он и так прижат всегда к низу. Буду благодарен за помощь, профи

<!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" lang="ru">

<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<meta http-equiv="Content-Language" content="ru" />
	<meta name="description" content="description" />
	<meta name="keywords" content="keywords" />
	<meta name="robots" content="all" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<link rel="stylesheet" type="text/css" href="./css/all.css" media="screen" />
	<!--[if IE]><link rel="stylesheet" type="text/css" href="./css/ie.css" /><![endif]-->

<style>
@charset "utf-8";
@import"reset.css";

html, body {height: 100%; background: #cce7fc url('./images/bg_footer.jpg') repeat-x bottom center;}

#container {width: 990px; margin: 0 auto; min-height: 100%; margin-bottom: -269px;}
* html #container {height: 100%;}
#page-empty {width: 100%; height: 0px; clear: both;}
a {outline: none; -moz-outline: 0; border: none; border-width: 0px;}
a:active {outline: none; -moz-outline: 0;}
a:focus {outline: none; -moz-outline: 0;}
.empty {clear: both;}

/* header */
#header {position: relative; width: 990px; height: 407px; background: url('./images/bg_header.png') no-repeat top center; margin: 0 auto;}
#header .tel {position: absolute; width: 150px; height: 43px; margin: 25px 0 0 773px; font: bold 14px 'Trebuchet MS'; color: #6fa0b4; background: url('./images//tel.png') no-repeat 0 0; text-indent: -9999px; overflow: hidden; display: block;}
#header .mail {position: absolute; margin: 80px 0 0 779px; isplay: block;}
#header .mail a {font: normal 14px 'Trebuchet MS'; color: #cc6d08; text-decoration: underline;}
#header .mail a:hover {text-decoration: underline;}

/* content */
#content {width: 990px; margin: 0; vertical-align: top; z-index: 2;}
#middle {width: 100%; padding: 0 0 0 0; height: 1%;}
#middle:after {content: '.'; display: block; clear: both; visibility: hidden;}

#content ul.persi {position: relative; width: 930px; height: 263px; z-index: 2;}
#content ul.persi h3 a {font: bold 18px 'Trebuchet MS'; color: #ffffff; text-align: center; overflow: hidden; text-indent: -9999px; text-decoration: none;}
#content ul.persi li {float: left; margin: -85px 0 0 0; z-index: 2;}

#content ul.persi li.s-1 a {width: 189px; height: 263px; display: block; background: url('./images/s1_catalog.png') no-repeat;}
#content ul.persi li.s-2 a {width: 161px; height: 263px; display: block; background: url('./images/s2_new_news.png') no-repeat;}
#content ul.persi li.s-3 a {width: 214px; height: 263px; display: block; background: url('./images/s3_contacts.png') no-repeat;}
#content ul.persi li.s-4 a {width: 175px; height: 263px; display: block; background: url('./images/s4_otzivi.png') no-repeat;}
#content ul.persi li.s-5 a {width: 181px; height: 263px; display: block; background: url('./images/s5_info.png') no-repeat;}

/* footer */
#footer {position: relative; width: 671px; height: 269px; background: url('./images/bg_footer2.png') no-repeat bottom center; margin: 0 auto;}
</style>

</head>

<body>

<!-- PAGE #Begin /-->
<div id="container">

	<!-- HEADER #Begin /-->
	<div id="header">
	111111111
	</div>
	<!-- HEADER #End /-->

	<!-- CONTENT #Begin /-->
	<div id="content">
	<div id="middle">
  		<ul class="persi">
  			<li class="s-1"><h3><a href="">Каталог</a></h3></li>
  			<li class="s-2"><h3><a href="">Новинки и новости</a></h3></li>
  			<li class="s-3"><h3><a href="">Контакты</a></h3></li>
  			<li class="s-4"><h3><a href="">Отзывы</a></h3></li>
  			<li class="s-5"><h3><a href="">Полезная информация</a></h3></li>
  		</ul>
		<div class="empty"> </div>
	</div>
	</div>
	<!-- CONTENT #End /-->

</div>
<!-- PAGE #End /-->

<!-- Footer #Begin /-->
<div id="footer"></div>
<!-- Footer #End /-->

</body>
</html>

Edited July 16, 2011 by okunev2

Softlink · July 17, 2011

у вас проблема в этой строчке:

#container {width: 990px; margin: 0 auto; min-height: 100%; margin-bottom: -269px;}

уберите отрицательный маржин и все заработает.

okunev2 · July 17, 2011

у вас проблема в этой строчке:
#container {width: 990px; margin: 0 auto; min-height: 100%; margin-bottom: -269px;}
уберите отрицательный маржин и все заработает.

это не поможет, убирал, здесь дело в футере мне кажется

Softlink · July 17, 2011

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

http://jsfiddle.net/G7cQp/

Temiks · July 17, 2011

Попробуйте сделать так

1. Добавьте высоту классу empty height: 269px;

2. А футер поднимите на эту высоту, то есть margin-top: -269px;

Так же способы как прижать футер можно посмотреть тут http://zodios.net/htmlcss/downfooter.html

okunev2 · July 17, 2011

Попробуйте сделать так
1. Добавьте высоту классу empty height: 269px;
2. А футер поднимите на эту высоту, то есть margin-top: -269px;
Так же способы как прижать футер можно посмотреть тут http://zodios.net/htmlcss/downfooter.html

не помогло

Softlink · July 17, 2011

что-то я не понимаю. Я вставил полностью ваш код, без изменений, убрал маржин и футер работает нормально. Почему у вас-то не получается?

okunev2 · July 17, 2011

что-то я не понимаю. Я вставил полностью ваш код, без изменений, убрал маржин и футер работает нормально. Почему у вас-то не получается?

ну так я и сделал

там фон прижат к низу контейнера, а футер поднимается на высоту хедера, а так фон уже не прижат к футеру получается

Edited July 17, 2011 by okunev2

Sign In

Резина по высоте проблема с футером

Question

okunev2

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

okunev2

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Temiks

Link to comment

Share on other sites

okunev2

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

okunev2

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information