>>frol
-- ikke så god en ide, da elementet så vil have en bredde på 100% og så vil de margin komme udenpå, så ialt vil bredden blive 100% + 40px !-)
Men et lille trick kan klare den:
<div style="margin:20px 20px;">
<div style="background:green;">
Denne div er 100% bred - 40px
</div>
</div>
-- som det fremgår kan du ikke umiddelbart lave en ting, som er 100% høj, men så kan man tricke endnu mere:
<div style="position:relative;margin:0 20px;border:0px;height:100%;">
<div style="background:green;height:100%;z-index:1;">
<div style="height:20px;"></div>
Denne div er 100% bred - 40px og ser ud som om den er 100% - 40px høj
<div style="height:20px;"></div>
</div>
<div style="height:20px;position:absolute;top:0px;background:white;z-index:2;width:100%;"></div>
<div style="height:20px;position:absolute;bottom:-1px;background:white;z-index:2;width:100%;"></div>
</div>
(Kiggede ikke så meget på det, at jeg fandt ud af de -1px, men det er der nok en forklaring på !-)
-- det er i begge eksempler en forudsætning, at du har noget, som ligner dette med i dit stylesheet:
html,body{
margin:0;
padding:0;
border:0;
height:100%;
}
-- og en fuldt kvalificeret doctype inklusive dtd-link, så f.eks.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 strict//EN"
"
http://www.w3.org/TR/html401/strict.dtd"><html>
<head>
<title>Fuld højde simpelt</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,
http://www.eksperten.dk/spm/497362"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
#banner{position:absolute;height:125px;width:100%;background:yellow;z-index:1;}
#top1{width:100%;height:50px;background:#770;}
#top2{width:100%;height:75px;background:#707;}
#main{height:100%;background:green;}
#spacer{height:125px;}
#bottom{position:absolute;bottom:0px;height:125px;width:100%;background:yellow;z-index:1;}
#bund1{width:100%;height:25px;background:#770;}
#bund2{width:100%;height:100px;background:#707;}
</style>
</head>
<body>
<div id="banner">
<div id="top1">top1</div>
<div id="top2">top2</div>
</div>
<div id="main">
<div id="spacer">Usynligt</div>
Hovedside</div>
<div id="bottom">
<div id="bund1">bund1</div>
<div id="bund2">bund2</div>
</div>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
