У меня есть внутренняя фиксированная ширина, содержащая содержимое переменного размера. Я хочу, чтобы высота этого inner-container была такой же большой, как и контент, и, по крайней мере, такой же большой, как высота экрана (когда контент меньше). На странице также есть нижний колонтитул фиксированного размера.гнездовое не заполнение экрана
Обычно я хотел бы установить min-height: 100% как для внутренних, так и для внешних (корневых) контейнеров, но это не работает в CSS.
Код, представленный ниже, является упрощенным примером ситуации, которая имеет место на более крупной странице (с гораздо большим количеством различных элементов в root-container). Зеленый inner-containerне, заполняя всю высоту экрана, как я бы хотел. Мне удалось это сделать (например, установив root-containerheight вместо min-height, но тогда рендеринг поступил неправильно, когда содержимое было больше высоты экрана (вы можете быстро имитировать это, изменив значение font-size на большее значение , как 21px). Я хочу, чтобы он работал (зеленая начинка колонки по крайней мере, высота экрана, черный на это обе стороны Повсеместно всю высоту и нижний колонтитулы на самом дне) в обоих случаях.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
}
#root-container {
min-height: 100%;
background: black;
color: white;
margin-bottom: -200px;
}
#root-container:after {
height: 200px;
content: "";
display: block;
}
#inner-container {
min-height: 100%;
width: 400px;
background: green;
color: white;
font-size: 11px;
margin-left: auto;
margin-right: auto;
}
#footer {
height: 200px;
background: orange;
color: black;
}
h1 {
margin-top: 0;
}
</style>
</head>
<body>
<div id="root-container">
<div id="inner-container">
<h1>Content</h1>
And when the body finally starts to let go<br/>
let it all go at once<br/>
not piece by piece<br/>
but like a whole bucket of stars<br/>
dumped into the universe<br/>
Whoh! Watcb it go!<br/>
Good-bye small hands, good-bye small heart<br/>
good-bye small head<br/>
My soul is climbing tree trunks<br/>
and swinging from every branch<br/><br/>
They're calling on me<br/>
they're calling on me<br/><br/>
Do you think I'm an animal?<br/>
Am I not?<br/>
Do you like fur<br/>
Do you wanna come over<br/>
Are we captive only for a short time<br/>
Is there splendor, I'm not ashamed<br/>
Desire shoots through me<br/>
Like birds singing<br/>
(The way you move no ocean's waves were ever as fluid)<br/><br/>
They're calling on me<br/>
they're calling on me<br/>
I hit the mark!<br/>
I target moon, I target sky, I target sun<br/>
Fall down on the world before it falls on you<br/><br/>
Like beggars, like Stars<br/>
like whores, us all<br/>
Like beggars, like dogs<br/>
Like Stars, us all<br/><br/>
Shoot straight for my heart<br/>
(And when you were near no sky was ever quite so clear)<br/><br/>
Like stars, so small<br/>
Like us, when we fall<br/>
Like beggars, like whores<br/>
Like lovers, Get Up!<br/>
Get up, too far
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
И тот же пример загружен в JSFiddle: http://jsfiddle.net/gNT8m/
Почему не работает 'min-height'? – scrblnrd3