Я использую превосходный пример peter для высоты 100% высоты с липким нижним колонтитулом (HERE). Я пропустил части нижнего колонтитула, я не использую его.ребенок div высота 100% игнорируется
Однако, когда я использую дочерний div и пытаюсь сделать то же самое, он не работает. Я хочу, чтобы дочерний div также принимал 100% высоты своего родителя. Вот CSS:
<style>
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#content_subdiv{
padding:1em 1em 5em; /* bottom padding for footer */
background:#999;
height:100%;
color:#fff;
}
</style>
и вот мой HTML код:
<div id="container">
<div id="header">
<h1>CSS layout: 100% height with header and footer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget massa dolor, rhoncus tempor nunc. Donec tempor odio eget purus vehicula auctor. </p>
</div>
<div id="content">
<p>
Aenean quam mauris, iaculis non aliquet quis, facilisis sed turpis. Cras id erat velit, nec bibendum erat. Vivamus feugiat purus vitae velit dictum in vestibulum ante tristique. Vestibulum ut massa vel justo eleifend consectetur eget ut nisi. Phasellus ut diam nulla. Suspendisse potenti. Praesent blandit gravida facilisis. Donec elementum faucibus gravida. Nullam nec enim velit, ac scelerisque justo. Pellentesque lacus metus, adipiscing nec congue a, volutpat sollicitudin eros. Donec tortor leo, tempor non viverra at, molestie sed dui. Nullam ipsum purus, tempus elementum tincidunt id, iaculis at lectus. Vestibulum viverra mi in mauris ultrices sollicitudin
</p>
<div id="content_subdiv"> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /> this sub div not stretching to 100%; <br /></div>
</div>
</div>
Для тех людей, которые говорят, что «Все, что вы можете сделать с помощью таблиц можно сделать с помощью CSS», то решить этот вопрос. Else, я собираюсь использовать большую тучную таблицу в своем HTML для целей макета. – capdragon
@capdragon Вы хотите, чтобы ребенок DIV принимал 100% от высоты родителя? Но как насчет абзаца, который также находится внутри родителя? Абзац занимает некоторое вертикальное пространство, поэтому ребенок DIV не может взять всех 100% высоты родителей ... –
@Sime Подраздел должен занимать оставшееся пространство – capdragon