Mam layout, gdzie kontener zawiera trzy div'y - nagłówek, treść i stopka. Chciałbym, aby div z treścią rozciągał się do samej stopki, co jest dla mnie ważne, gdy treść jest praktycznie pusta.
Kod strony:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</body>
</html>
CSS:
CODE
html, body {
height: 95%;
}
.container, .footer, .header, .content {
border: 1px solid #000000;
margin: 5px;
text-align: center;
padding: 3px;
}
.container {
width: 500px;
margin: 0 auto;
min-height: 100%;
position: relative;
}
.footer {
height: 20px;
position: absolute;
bottom: 0;
width: 482px;
}
.content {
background: #C6C6C6;
}
Próbowałem wstawić wartości procentowe do min-height/height dla content, ale z jakiegoś powodu nie działają - jedynie wartości pikselowe funkcjonują, jednak niszczą dynamiczne rozciąganie, więc postanowiłem zwrócić się do was o pomoc. Kontener jest mi potrzebny - pełni rolę ramki.
