[CSS] Geneste DIV's i.c.m. 100% height - Softwareontwikkeling

zondag 25 maart 2007 12:04

Acties:

Topicstarter

Ik had het plan om een dubbele rand rondom de content van mijn webpagina te maken. Deze rand zou moeten lopen van de bovenkant totaan de onderkant van de content, maar minimaal tot de onderkant van de browser als de content deze niet bereikt.

Nu had ik het volgende idee. Ik gebruik 3 geneste div's. De buitenste 2 dienen als rand en de binnenste vormt dan de plek voor de content.
Nu dacht ik als ik er voor zorg dat deze binnenste content div een minimale hoogte heeft van 100% dan stretchen de twee buitenste divs mee.
Dit is de gebruikte code:

HTML:

<!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">
  <head>
    <title>Title</title>
    <style type="text/css">
    html {
      height: 100%;
    }
    body {
      height: 100%;
      margin: 0px;
      padding: 0px;
      text-align:center;
    }
    .mainContainer {
      margin: 0px auto;
      width: 300px;
      min-height: 100%;
      height: auto !important;
      height: 100%;
      background-color: #eee;
      position: relative;
      border:1px solid #000;
    }
    </style>
  </head>
  <body>
    <div id="border1" style="border:1px solid #f00;height: 100%">
      <div id="border2" style="border:1px solid #0f0;height: 100%;">
        <div id="content" class="mainContainer">
          <p>
          Tekst
          </p>
        </div>  
      </div>
    </div>
  </body>
</html>

Hierbij moet ik misschien een opmerking plaatsen over de mainContainer class. Hierin zijn min-height en 2 maal height gedefinieerd. Deze code zorgt ervoor dat zowel in IE en FF de minimale DIV hoogte 100% is (komt van deze site).

Helaas werkt de HTML+CSS code hierboven niet zoals bedoelt. In Internet Explorer 6 ziet alles goed: Alle drie de DIV's zijn visueel genest en de randen lopen daardoor om de content DIV heen.

In Firefox 2 gaat dit helaas mis. De twee buitenste DIV's groeien niet verder dan de hoogte van de browser. Dit resulteert in de volgende situatie als de inhoud van de binnenste content DIV groeit:

Afbeeldingslocatie: http://roger.lamaars.nl/firefox.jpg

Afbeeldingslocatie: http://roger.lamaars.nl/firefox.jpg

Hierbij zie je dat de buitenste 2 DIV's ophouden en de binnenste doorloopt als je op het punt komt dat dieper is dan de browser hoogte, terwijl in IE de buitenste twee ook mooi doorlopen.
Kan iemand misschien verklaren waardoor dit gebeurt en hoe dit valt te voorkomen?

zondag 25 maart 2007 12:13

Acties:

BasieP

volgens mij is het IE die hier (weer) de fout maakt.

als je 3 divs genest hebt, en je maakt de middelste 100% height.. en de buitenste 2 hebben allebij borders, dan is het toch logisch dat je meer dan 100% heigh op je pagina heb? dit gaat toch niet passen?

edit: ow dat was niet eens de fout die je bedoelde..

kijk hier eens naar, misschien heb je er wat aan
http://www.cssplay.co.uk/layouts/basics2.html

trouwens is de enige reden dat IE het goed doet, dat jij de !important voor de ; heb gezet

[ Voor 33% gewijzigd door BasieP op 25-03-2007 12:18 ]

This message was sent on 100% recyclable electrons.

zondag 25 maart 2007 12:32

Acties:

Borizz

De buitenste geneste div's geef je een height: 100% mee daardoor worden deze niet opgerekt als de content groter wordt. Dit betekend namelijk dat de hoogte 100% van het parent element moet zijn, in dit geval de body die ook nogeens 100% hoog is (van zijn parent element > html). het html element is op zijn beurt 100% hoog t.o.v. de viewport. Alles wat groter is dan je viewport (100% hoogte) zal dus over je html, body, border1 en border2 element heen lopen..

If I can't fix it, it ain't broken.

zondag 25 maart 2007 13:17

Acties:

AquilaDus

Topicstarter

Borizz schreef op zondag 25 maart 2007 @ 12:32:
De buitenste geneste div's geef je een height: 100% mee daardoor worden deze niet opgerekt als de content groter wordt. Dit betekend namelijk dat de hoogte 100% van het parent element moet zijn, in dit geval de body die ook nogeens 100% hoog is (van zijn parent element > html). het html element is op zijn beurt 100% hoog t.o.v. de viewport. Alles wat groter is dan je viewport (100% hoogte) zal dus over je html, body, border1 en border2 element heen lopen..

Dat klinkt inderdaad logisch. Maar hoe zorg je er voor dat de twee buitenste div's minimaal evenhoog zijn al de browser?
Als ik de 100% definities weghaal voor html, body en de twee buitenste divs dan zakken de buitenste div's in.

zondag 25 maart 2007 13:21

Acties:

AquilaDus

Topicstarter

BasieP schreef op zondag 25 maart 2007 @ 12:13:
volgens mij is het IE die hier (weer) de fout maakt.

als je 3 divs genest hebt, en je maakt de middelste 100% height.. en de buitenste 2 hebben allebij borders, dan is het toch logisch dat je meer dan 100% heigh op je pagina heb? dit gaat toch niet passen?

edit: ow dat was niet eens de fout die je bedoelde..

kijk hier eens naar, misschien heb je er wat aan
http://www.cssplay.co.uk/layouts/basics2.html

trouwens is de enige reden dat IE het goed doet, dat jij de !important voor de ; heb gezet

Ik zie dat de link gaat over fixed-size layouts. Ik wil die van mij niet vastzetten qua grootte, maar er alleen voor zorgen dat initieel de divs worden gezet op de hoogte van de browser en dat deze dan meegroeien met de content van de binnenste div.

dinsdag 3 april 2007 21:08

Acties:

AquilaDus

Topicstarter

Niemand die mij verder kan helpen?

dinsdag 3 april 2007 21:20

Acties:

moozzuzz

Evt. de binnenste div op 100% zetten in combi met negatieve margins? De rest er dan omheengooien zou als effect moeten hebben dat je begint met 100% en meegroeit indien nodig. Of denk ik verkeerd?

vb:
100% - bovenmargin + borderwidth - ondermargin + borderwidth
100% - 6px + 3px + 3px - 6px + 3px + 3px = 100%
(er van uitgaande dat je 2 borders in totaal 6px breed zijn)

[ Voor 34% gewijzigd door moozzuzz op 03-04-2007 21:23 . Reden: mini voorbeeldje ]

dinsdag 3 april 2007 23:25

Acties:

Zillion01

Obey your screen!

Je voorbeeld suggereert dat je een rand om je body wilt?

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">
  <head>
    <title>Title</title>
    <style type="text/css">
    body {
      margin: 0px;
      padding: 0px;
      text-align:center;
      border:5px solid #f00;
    }
    .mainContainer {
      margin:auto;
      width: 300px;
      min-height: 100%;
      height: auto !important;
      height: 100%;
      background-color: #eee;
      position: relative;
      border:5px solid #000;
    }
    </style>
  </head>
  <body>
          <div id="content" class="mainContainer">
          <p>
          Lappen tekst 
          </p>
        </div>    
  </body>
</html>

Overigens zou mainContainer een id moeten zijn daar die maar 1 keer voorkomt op de pagina.

[ Voor 14% gewijzigd door Zillion01 op 03-04-2007 23:34 ]

donderdag 5 april 2007 12:06

Acties:

Verwijderd

Kun je niet ook een min-height: 100% op je body geven? Of begrijp ik het probleem nu verkeerd?

vrijdag 6 april 2007 19:09

Acties:

AquilaDus

Topicstarter

Ik heb het probleem gelukkig kunnen verhelpen door de height van border1 en border2 niet op 100% te zetten. IE behandelt dit namelijk als een min-height. In FF werkt de code nu ook goed als ik deze 100% maar verwijder.

Pagina: 1

Reageer