Jag sitter och försöker få till lite div-prylar men det går inte så bra.
I skrivande stund har jag två div:ar, ett div-block i toppen som ser ut så här:
top: 0px;
left: 0px;
width: 100%;
height: 138px;
Kant i kant under detta block ska ett annat block ligga, och detta ska fylla ut resten av utrymmet i webbläsarfönstret. I dagsläget ser det ut så här:
top: 139px;
left: 0px;
width: 100%;
Nu kommer dock min fråga. Vad ska jag sätta för height-värde i det undre blocket? Just nu, utan något värde alls, så fylls sidan allt eftersom innehåll tillkommer men den ska alltså alltid täcka resten av fönstret.
Det funkar bra verkar det som.
Finns variationer där du placerar div#tva relativt till bodyn, eller ännu bättre relativt till div#ett (genom att sätta den direkt efter:
,
tar bort margin på p, och använder javascript till att få den resterande höjd av dokumentet. Båda funkar lika bra tycker jag...
(av någon anledning så ville inte div#tva { padding-top: 140px; } att fungera :q, så jag flyttade det till en ny box: p#this)
A list apart har något liknande i en artikel i stil med 'footers' nåt, annars kolla javascript. Kollade inte detta i IE.
<!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">
<head>
<title>Div-test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
#container {
width:100%;
min-height:100%;
background-color:#666;
}
p {
font-family: verdana, helvetica, sans-serif;
font-size: 11px;
line-height: 18px;
color: #fff;
margin:0;
padding: 5px 10px 5px 10px;
}
#header{
height: 138px;
background-color:#333;
margin:0;
}
#main {
background-color:#666;
margin:0;
}
</style>
<!--[if IE]>
<style type="text/css">
#container {height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header"><p>header</p></div>
<div id="main"><p>main</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tristique
tortor nec neque. Nullam risus turpis, bibendum vitae, dapibus id, tempor et,
orci. Etiam sed nunc eu lacus semper interdum. Aenean sollicitudin nunc vel
purus pharetra ultrices. Donec molestie ipsum at libero. Praesent euismod pharetra
risus. Donec condimentum quam ut quam posuere rutrum. Aliquam erat volutpat.
Mauris venenatis massa id lectus. Mauris scelerisque, mi at condimentum eleifend,
arcu est iaculis lectus, id porta ipsum turpis at erat. Morbi ac nunc ac erat
dapibus mollis. Integer ipsum. Vestibulum egestas, libero eu egestas rutrum,
diam ligula commodo purus, eu tincidunt quam eros et tellus. In hac habitasse
platea dictumst.</p>
<p>Donec diam leo, tristique ac, sodales eu, tristique varius, est. Duis egestas
dui non ipsum facilisis commodo. Aliquam erat volutpat. Nullam pede neque, lacinia
eu, tincidunt a, mollis malesuada, augue. Quisque ac ligula ut velit porttitor
rhoncus. Praesent accumsan sagittis elit. Sed in arcu. Aenean vitae neque sit
amet felis dapibus tincidunt. Quisque sodales, neque sed nonummy eleifend, leo
est sagittis turpis, ac hendrerit pede mauris at dolor. Donec ut nisl eget dui
interdum condimentum. Nam massa quam, porttitor eget, feugiat vel, ullamcorper
ac, nibh. Pellentesque elit. Pellentesque consectetuer quam ut orci.</p></div>
</div>
</body>
</html>
:) hmm. visste inte att divs drar ut sig på höjden också genom att man sätter body och html till height: 100%...
Det var ju snyggt... Och min funkar bara i Firefox :s.
(damn u IE)
