[CSS] div over het hele scherm

**Lou Landre** · 26-07-2006, 22:40

Hoi,

Ik wil een div over de gehele breedte en hoogte van m'n pagina leggen, als het even kan alleen met css. Het probleem is echter dat ik in IE altijd een lege ruimte aan de rechterkant van mijn div krijg. Iemand enig idee hoe ik dit op kan lossen zonder de margin van de body op 0 moet zetten, en zonder overflow: hidden truukjes?

Even een voorbeeldje van hoe het er nu uitziet:

Code:

<style>
div#overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: red;
}
</style>
fdsfs<br>gfsdfs<br>fdsfs<br>gfsdfs<br>fdsfs<br>gfsdfs<br>
<div id="overlay"></div>

**Sander Boverhof** · 27-07-2006, 14:46

Ik denk dat je de body wel een margin mee moet geven van 0. Op internet gezocht maar niet zo snel een antwoord gevonden. Bij het testen van de page zag ik wel dat Mozilla FF de gehele breedte neemt zonder een wit tussenstuk. Je zou dus een IE only hack kunnen gebruiken voor de body, of een IE only eigenschap meegeven in de div, zoals padding of margin waardoor hij wel netjes tot de gehele breedte aansluit.

Code:

_margin: 0;

Verder zou ik niet een relevante oplossing kunnen geven. Ik zal nog eens rondkijken..

**David Young** · 27-07-2006, 19:59

Het altijd een goed id om padding en margin voor een element aan te geven. Want de browsers hebben verschillende standaardinstellingen. Sommige browsers hebben standaard 8px margin.
Dus probeer dit eens:

PHP Code:


div#overlay{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

In weer andere browsers is het nodig om de elementen <html> en <body> een bepaalde grootte te geven.
Dus dit kan je ook proberen:

PHP Code:


html, body{
height: 100%;
width: 100%;
}

Anders moet je idd zoeken naar wat CSS hacks.

**Dirk Bonhomme** · 27-07-2006, 20:34

Quirks-mode wil wel eens werken voor 100% hoogte: Dit verkrijg je door de doctype bovanaan je document weg te laten

**Sander Boverhof** · 27-07-2006, 22:10

Mja, als je deze coding bekijkt in een html document zie je dat hij in IE niet de volledige breedte pakt, maar aan de rechterkant er nog een stuk lege witruimte is van ong. 20 pixels. In Firefox is dit niet zo.

Als ik het goed begrijp, gaat het hier dus om de breedte ipv de hoogte.

De gemakkelijkste oplossing ervoor is toch echt een margin mee te geven aan html/body. Met eventuele hacks zou je ook een eind kunnen komen, maar aangezien je het zo simpel mogelijk wilt houden lijkt mij dat ook niet de juiste oplossing.

Zou ik mogen vragen waarom je de body geen margin: 0; mee wilt geven? Is dit in verband met de rest van de layout, of heeft dit een bepaalde voorkeur?

**Michiel H.** · 12-08-2006, 18:57

Waarom wil je eigenlijk een DIV over de hele pagina? :/

[CSS] div over het hele scherm