проблема с привязкой блока к низу страницы

Kos87 · October 22, 2009

вот часть кода CSS:

@charset "utf-8";
html{background-color:#fff; color:#000; margin:0; padding:0;}
body{margin:0 auto; padding:0; width:900px; height:100%;}
#header{width:900px; height:123px; background:url(diz/head.png) no-repeat center; margin:5px 0 20px 0;}
#content{font-family:Arial, Helvetica, sans-serif; font-size:100%; color:#666666; padding-bottom:50px;}
#footer{text-align:center; background-color:#0099FF; width:900px; height: 50px; position: absolute; bottom:0; margin:0;}

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

подскажите где не так??

вот сайт http://help-team.com.ua/klientu.html

Edited October 22, 2009 by Kos87

Scrum · October 22, 2009

		<p>

		<a href="http://validator.w3.org/check?uri=referer"><img
		src="http://www.w3.org/Icons/valid-xhtml10-blue"
		alt="Valid XHTML 1.0 Transitional" height="31" width="88" style="border-width:0;" /></a>
		</p>

p {margin: 0;}

Kos87 · October 22, 2009

спасибо!

тут по ходу еще одна проблема всплыла :angry:

вот http://help-team.com.ua/

что я пропустил?..

у меня ноут 15", вот скрин проблемы http://pix.academ.org/img/2009/10/23/d249b...0ba74f9fd94.png

Edited October 22, 2009 by Kos87

Scrum · October 22, 2009

это не проблема, это правильное поведение блоков с абсолютным позиционированием.

икать footer прижатый к нижу или чет в этом ключе.

Kos87 · October 22, 2009

спасибо!

может кому понадобится, сменил position: absolute; на position: relative; :

@charset "utf-8";
html{background-color:#fff; color:#000; margin:0; padding:0;}
body{margin:0 auto; padding:0; width:900px; height:100%;}
#header{width:900px; height:123px; background:url(diz/head.png) no-repeat center; margin:5px 0 20px 0;}
#content{font-family:Arial, Helvetica, sans-serif; font-size:100%; color:#666666; padding-bottom:50px;}
#footer{text-align:center; background-color:#0099FF; width:900px; height: 50px; position: relative; bottom:0; margin:0;}

подводных камней быть ведь не должно?

Edited October 22, 2009 by Kos87

Scrum · October 22, 2009

можно вообще убрать позишен.

Kos87 · October 22, 2009

нет, без него никак.

ток что пробовал. :angry:

мда... что есть он что нету ...

http://help-team.com.ua/klientu.html

лажа ...

что делать?? ставить абсолют но указывать какие то доп размеры?

вот тут я этот способ нашел но все в пордят не стал тупо перекатывать http://xhtml.ru/2005/10/18/footer-stick/

Edited October 22, 2009 by Kos87

Scrum · October 22, 2009

икать footer прижатый к нижу или чет в этом ключе.

Kos87 · October 22, 2009

вот тут я этот способ нашел но все в пордят не стал тупо перекатывать http://xhtml.ru/2005/10/18/footer-stick/

что упустил?.. :angry:

Scrum · October 22, 2009

css ie6

  #carrier {
	width: expression((documentElement.clientWidth||document.body.clientWidth)<1024?'800px':'auto');
  }

css style

  html, body {
	height: 100%;
	margin:0;
	padding:0;
	border: none;
  }
  #carrier {
	height: 100%;
	min-width: 800px;
	max-height: 100%;
  }
  #head, #footer {
	height: 113px;
	position: relative;
	background: orange;
  }
  #footer {
	clear: both;
  }
  .substrate {
	height: 113px;
  }
  html>body #content, html>body .box {
	height: auto !important;
  }
  #content {
	height: 100%;
	min-height: 100%;
	margin: -113px 0;
	background: gray;
  }

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" xml:lang="en" lang="en">

<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
  <!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" />
  <![endif]-->
</head>

<body>
	<div id="carrier">
		<div id="head">
			head
		</div>
		<div id="content">
			<div class="substrate"></div>
				content
			<div class="substrate"></div>
		</div>
		<div id="footer">
			footer
		</div>
	</div>

</body>

</html>

дерзай уже лень смотреть чего там не так.

Kos87 · October 24, 2009

вот мой вариант, у меня работает

@charset "utf-8";
html{background-color:#fff; color:#000; margin:0; padding:0; height:99%;}
body{font-family:Arial, Helvetica, sans-serif; margin:0 auto; padding:0; width:900px; height: auto !important; height: 100%; min-height: 100%; position: relative;}

#header{width:900px; height:123px; background:url(diz/head.png) no-repeat center; margin:5px 0 15px 0;}
#content{font-size:100%; color:#666666; padding-bottom:90px;}
#footer{text-align:center;width:100%; position: absolute; bottom:0; margin:0 0 20px 0;}

Sign In

проблема с привязкой блока к низу страницы

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information