Margin-top и вложеные дивы.

McGregor · February 8, 2008

Столкнулся с непонятной для себя проблемой:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">

html, body {height:100%}
body {
	padding:0;
	margin:0;

}
#outer{
	min-height:100%;
	background-color: #00FF99;
	width: 850px;
	position: relative;
	left: 50%;
	margin-left: -425px;

}
* html #outer{height:100%}
#header{
	width:100%;
	height:140px;
	background:#FF0000;
	margin-top: 100px;
}
</style>

</head><body>

 <div id="outer"> 
	  <div id="header"></div>
	  <div id="content"></div>
</div>

</body></html>

В IE это ведет себя так, как я и задумывал - т.е outer растягивается на всю высоту окна, а header внутри него с отступом от верхнего края на 100px. Но вот в лисе и в опере отступ, почему-то, назначается блоку outer. Собственно, почему так? И еще вопрос - можно ли заставить блок content растянуться на все оставшееся после хеадера место до низа страницы?

klierik · February 8, 2008

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

2.можно. но там структура будет другая.

хеадер прийждеться позиционировать абсолютно.

контент растягивать на 100% а в нем див с отступом == высоте хидера

Scrum · February 8, 2008

а если так ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>margin</title>
<style type="text/css">
html, body {
 margin: 0; 
 height: 100%;
}

.parent {
 background: #404040;
 padding-top: 1px;
 height: 100%;
 width: 850px;
 margin: 0 auto;
}

.child {
 margin-top: 100px; 
 background: silver;
 height: 250px;
}
</style>
</head>
<body>

<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>

</body>
</html>

McGregor · February 8, 2008

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

С падингом прокрутка появляется

Scrum said:
а если так ?..

Спасибо! Только маленькое дополнение для уничтожения прокрутки на 1 пиксел:

html, body {
 margin: 0; 
 margin-top: -1px;
 height: 100%;
}

Sign In

Margin-top и вложеные дивы.

Question

McGregor

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

McGregor

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information