[CSS] 100% height voor 2 DIVjes naast elkaar (2 kolomen)

woensdag 24 januari 2007 16:21

Tja.. het alom bekende divs&100%-height probleem. Is hier al vaker langsgekomen (in een zelfde soort vraag als deze; of als iemand een footer wil maken), maar volgens mij nog nooit echt fatsoenlijk antwoord op gekomen.

De enige manier waarop ik het ooit op heb kunnen lossen is met javascript.
Niet zo netjes; maar dat maakt natuurlijk voor het grote publiek gelukkig niet uit. Ik heb het even aangepast aan je wensen (twee kollommen).

HTML:

<!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" xml:lang="en">
<head>
<title>CSS Layout - 100% height</title>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
}

#container {
    position: relative; 
    margin: 0 auto;
    width: 750px;
    background: gray;
}

#header {
    background: lightblue;
    height: 80px;
}

#left {
    float: left;
    width: 50%;
    background: lightgreen;
}

#right {
    float: left;
    width: 50%;
    background: pink;
}
</style>

<script type="text/javascript">
    function getWindowHeight(){
      if (navigator.appName=="Netscape")
         {
            var windowHeight = window.innerHeight;
         }
         else if (navigator.appName.indexOf("Microsoft")!=-1)
         {
            var windowHeight = document.documentElement.clientHeight;
         }
         return windowHeight;
    }
    
    function getContentHeight(){
        var leftContentHeight = document.getElementById("left").offsetHeight;
        var rightContentHeight = document.getElementById("right").offsetHeight;
        if (leftContentHeight > rightContentHeight) return leftContentHeight;
        else return rightContentHeight;
    }       
    
    function setDivHeights() {
        headerHeight = 80;
        windowHeight = getWindowHeight();
        contentHeight = getContentHeight();
        if ((windowHeight - headerHeight) > contentHeight) {
            document.getElementById("left").style.height = windowHeight - headerHeight +"px";
            document.getElementById("right").style.height = windowHeight - headerHeight +"px";
        }
        else {
            document.getElementById("left").style.height = contentHeight +"px";
            document.getElementById("right").style.height = contentHeight +"px";
        }

    }
</script>
</head>

<body onload="setDivHeights();" onresize="setDivHeights();">
    <div id="container">
        <div id="header">header</div>
        <div id="left">
            <p>hallo</p>
            <p>dit</p>
            <p>is</p>
            <p>een</p>
            <p>test</p>
        </div>
        <div id="right">right</div>
    </div>
</body>
</html>

Online: http://99procentsap.nl/test.php

Het enige probleem met dit script is wanneer je je browserwindow resized van groot naar klein, dan werkt hij namelijk niet; je krijgt dan scrollbalken (dit ivm. de offsetHeight van de div die je vergroot hebt).

Als iemand hier een betere (non-js) oplossing weet hou ik me aanbevolen!

Acties:

erwin85

Ik denk dat jij het best Faux Columns kan gaan gebruiken.

Het enige wat je nodig hebt is een background-image.

Meer informatie kan je hier vinden

vrijdag 26 januari 2007 14:44

Acties:

DarkSilence

W3designer.nl

Topicstarter

Ik heb de oplossing geprobeerd van HyperioN. Dit leek in het HTML voorbeeld primma te werken wat HyperioN gepost heeft. Alleen als ik deze in de website inbouw gaat het volledig mis.

In Firefox werkt het JS primma. Alleen in IE 6.0 gaat het niet goed, als de content/right DIV meer dan een scherm hoog is crasht IE.

Ik denk dat het ligt aan feit dat IE de DIVS de nieuwe hoogte geeft en hierbij weer een nieuw resize event onstaat. Er zullen wel aantal zaken worden her geposineerd.

wat kan ik hier aan doen voor de rest lijkt het me primma code.

HTML:

<script language="JavaScript" type="text/JavaScript">
<!--
    function getWindowHeight(){ 
      if (navigator.appName=="Netscape") 
         { 
            var windowHeight = window.innerHeight; 
         } 
         else if (navigator.appName.indexOf("Microsoft")!=-1) 
         { 
            var windowHeight = document.documentElement.clientHeight; 
         } 
         return windowHeight; 
    } 
     
    function getContentHeight(){ 
        var leftContentHeight = document.getElementById("submenu").offsetHeight; 
        var rightContentHeight = document.getElementById("content").offsetHeight; 
        if (leftContentHeight > rightContentHeight) return leftContentHeight; 
        else return rightContentHeight; 
    }         
     
    function setDivHeights() { 
        headerHeight = 144; 
        windowHeight = getWindowHeight(); 
        contentHeight = getContentHeight(); 
        if ((windowHeight - headerHeight) > contentHeight) { 
            document.getElementById("submenu").style.height = windowHeight - headerHeight +"px"; 
            document.getElementById("content").style.height = windowHeight - headerHeight +"px"; 
        } 
        else { 
            document.getElementById("submenu").style.height = contentHeight +"px"; 
            document.getElementById("content").style.height = contentHeight +"px"; 
        } 

    } 
    
    window.onresize = setDivHeights;
    window.onload = setDivHeights;
//-->
</script>

W3designer.nl

vrijdag 26 januari 2007 15:19

Acties:

vrijdag 26 januari 2007 15:34

DarkSilence schreef op vrijdag 26 januari 2007 @ 14:44:
Ik heb de oplossing geprobeerd van HyperioN. Dit leek in het HTML voorbeeld primma te werken wat HyperioN gepost heeft. Alleen als ik deze in de website inbouw gaat het volledig mis.

In Firefox werkt het JS primma. Alleen in IE 6.0 gaat het niet goed, als de content/right DIV meer dan een scherm hoog is crasht IE.

Ik denk dat het ligt aan feit dat IE de DIVS de nieuwe hoogte geeft en hierbij weer een nieuw resize event onstaat. Er zullen wel aantal zaken worden her geposineerd.

wat kan ik hier aan doen voor de rest lijkt het me primma code.

Heb je daar ook een online voorbeeld van; want in mijn voorbeeld kan ik de content zo groot maken als ik wil het blijft werken..

[ Voor 48% gewijzigd door HyperioN op 26-01-2007 15:25 ]

Acties:

Verwijderd

Ik weet niet zeker of dit het probleem is, maar er is een duidelijk verschil tussen "height: 100%;" en "height: auto;" in CSS.

Vrij vertaald in brak nederlands: "height: 100%;" claimt alle beschikbare ruimte binnen de afmetingen van de bovenliggende DIV(s). "height: auto;" claimt alleen de benodigde ruimte die het nodig heeft om de content precies passend weer te geven.

code:

<DIV id=content>
  <DIV id=left>begin<BR><BR><BR><BR><BR><BR>end</DIV>
  <DIV id=middle>begin<BR><BR><BR>end</DIV>
  <DIV id=right>begin<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>end</DIV>
</DIV>

CSS:

#content {
float: left;
width:800px;
height: 600px;
}

#left {
float: left;
width: 100px;
height: auto;
}

#middle {
float: left;
width: 600px;
height: auto;
}

#right {
float: left;
width: 100px;
height: auto;
}

"height: 100%" zou 600px geven; "height: auto" zal net zo veel ruimte gebruiken als nodig is om de content passend weer te geven. Als je ervoor wilt zorgen dat left, middle en right zich aanpassen aan de langste van de 3, moet je een extra DIV eromheen zetten die "height: auto" gebruikt.

Hoop dat dit alles zinnig klinkt en ook nog eens klopt

(Ga emigreren naar Australie + heb server ingepakt voor verscheping. verveel me...)

Garantie tot de deur.

[ Voor 5% gewijzigd door Verwijderd op 26-01-2007 19:08 ]

vrijdag 26 januari 2007 15:38

Acties:

vrijdag 26 januari 2007 15:56

Verwijderd schreef op vrijdag 26 januari 2007 @ 15:34:
Ik weet niet zeker of dit het probleem is, maar er is een duidelijk verschil tussen "height: 100%;" en "height: auto;" in CSS.

Vrij vertaald in brak nederlands: "height: 100%;" claimt alle beschikbare ruimte binnen de afmetingen van de bovenliggende DIV(s). "height: auto;" claimt alleen de benodigde ruimte die het nodig heeft om de content precies passend weer te geven.

[knip]

"height: 100%" zou 600px geven; "height: auto" zal net zo veel ruimte gebruiken als nodig is om de content passend weer te geven. Als je ervoor wilt zorgen dat left, middle en right zich aanpassen aan de langste van de 3, moet je een extra DIV eromheen zetten die "height: auto" gebruikt.

Hoop dat dit alles zinnig klinkt en ook nog eens klopt
(Ga emigreren naar Australie + heb server ingepakt voor verscheping. verveel me...)

Garantie tot de deur.

Mja; leuk verhaaltje; maar dat werkt dus niet hoor.

Acties:

Verwijderd

Ik zie het probleem niet zo. Copy-paste-save en openen met je browser:

code:

<html>
<head>
<style>
#content {
float: left;
width:800px;
/* height: 600px; */
height: 100%;
}

#left {
float: left;
width: 100px;
height: auto;
background-color: red;
}

#middle {
float: left;
width: 600px;
height: auto;
background-color: blue;
}

#right {
float: left;
width: 100px;
height: auto;
background-color: green;
}
</style>
</head>
<body>
<DIV id=content>
<DIV id=left>begin<BR><BR><BR><BR><BR><BR>end</DIV>
<DIV id=middle>begin<BR><BR><BR>end</DIV>
<DIV id=right>begin<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>end</DIV>
</DIV>
</body>
</html>

[ Voor 4% gewijzigd door Verwijderd op 26-01-2007 19:10 ]

vrijdag 26 januari 2007 16:01

Acties:

vrijdag 26 januari 2007 16:21

Verwijderd schreef op vrijdag 26 januari 2007 @ 15:56:
Ik zie het probleem niet zo. Copy-paste-save en openen met je browser:

Dude.. begrijp je wel wat de bedoeling is? De kolommen moeten dus tot de onderkant van het venster komen (of langer) en even lang zijn.
Dus niet zoals jouw voorbeeld:

Afbeeldingslocatie: http://99procentsap.nl/thumb/84/

*klik*

Enneuh, je maakt nu die content-div gewoon zomaar 600px zodat er scrollbalken komen bij kleinere vensters, daar zit dus niemand op te wachten; en bij grotere vensters is deze dus niet groot genoeg.

En zet je code de volgende keer ff in [code]-tags.

[ Voor 14% gewijzigd door HyperioN op 26-01-2007 16:08 ]

Acties:

DarkSilence

W3designer.nl

Topicstarter

Nee dat is idd niet wat ik bedoel. Hierbij een schetsje van wat de bedoeling is.

Afbeeldingslocatie: http://www.w3designer.nl/GoT/img_1.gif

Ik heb een schematische weergave van wat ik wil. Het zwarte kader is het browserscherm. De rode balk is de header en moet altijd bovenaan blijven staan, deze heeft een hoogte van ongeveer 140pixels. De groene en blauwe balk zijn de twee ‘kolomen’. In het de groene kolom komt menu en in de rechter komt de content. Deze moeten minimaal de scherm hoogte hebben en bij meer content mee groeien! Dus de groene en blauwe balk zijn minimaal zo hoog als de3 paarse. Deze bestaat dus niet!!!

Als de groene of blauwe balk meer inhoud bevat dan in de schermhoogte passen dienen deze alle bij even lang te zijn.

Hierbij de URL van de website waarbij het mis gaat:
http://www.hetvestzaktheater.nl/hetvestzaktheater.nl/

In firefox werkt het JS primma en IE niet. Klik even door naar verschillende pagina's tot je moet scrollen want dan pas gaat het mis in IE 6.

[ Voor 5% gewijzigd door DarkSilence op 26-01-2007 16:22 ]

W3designer.nl

vrijdag 26 januari 2007 17:15

Acties:

vrijdag 26 januari 2007 17:19

DarkSilence schreef op vrijdag 26 januari 2007 @ 16:21:
Nee dat is idd niet wat ik bedoel. Hierbij een schetsje van wat de bedoeling is.

[afbeelding]

Ik heb een schematische weergave van wat ik wil. Het zwarte kader is het browserscherm. De rode balk is de header en moet altijd bovenaan blijven staan, deze heeft een hoogte van ongeveer 140pixels. De groene en blauwe balk zijn de twee ‘kolomen’. In het de groene kolom komt menu en in de rechter komt de content. Deze moeten minimaal de scherm hoogte hebben en bij meer content mee groeien! Dus de groene en blauwe balk zijn minimaal zo hoog als de3 paarse. Deze bestaat dus niet!!!

Als de groene of blauwe balk meer inhoud bevat dan in de schermhoogte passen dienen deze alle bij even lang te zijn.

Hierbij de URL van de website waarbij het mis gaat:
http://www.hetvestzaktheater.nl/hetvestzaktheater.nl/

In firefox werkt het JS primma en IE niet. Klik even door naar verschillende pagina's tot je moet scrollen want dan pas gaat het mis in IE 6.

Ik denk dat IE vastloopt omdat je meerdere divs hebt die aan elkaar vasthangen.. maar ik heb nu geen zin om door je hele code heen te gaan ploeteren. Probeer zelf even je opbouw te strippen tot het hoogstnoodzakelijke en kijk of het dan wel werkt; en ga dan stuk voor stuk weer dingen erin zetten.
Ik denk niet dat het door je eerder genoemde reden komt want hij triggert alleen de functie opnieuw bij een resize van het window; niet van de divs.

Acties:

erwin85

Ah nu snap ik wat je bedoeld.

Ik heb even op google gezocht en kwam deze website tegen.

Ik hoop dat ik je hiermee voldoende heb geholpen.

vrijdag 26 januari 2007 19:10

Acties:

Kiphaas7

http://www.alistapart.com/articles/holygrail/

[ Voor 48% gewijzigd door Kiphaas7 op 26-01-2007 19:11 ]

vrijdag 26 januari 2007 19:16

Acties:

Verwijderd

@HyperioN:
Klopt; die 600px had 100% moeten zijn + heb ook de code tags gebruikt.

--

Ik plaats om left, middle en right DIVs altijd een extra DIV waar ik een "background-url" plaatje van max 50 pixels hoog of zo met repeat-y in plaats. Deze DIV zorgt dan voor de background; de left, middle en right DIV bevatten dan alleen tekst. Op deze manier voorkom ik dat left, middle en right van verschillende lengte zijn.

Ik wil dit topic niet kapen, maar als iemand een beter idee om left, middle en right DIVs qua background van gelijke lengte te krijgen hoor ik dat graag.

zaterdag 27 januari 2007 18:42

Acties:

BlackIce

afaik is Faux Columns de netste en algemeen best geaccepteerde manier om dit te doen.
Javascript zal best kunnen werken, maar vind ik niet de netste manier. ( hoewel dit eigenlijk gewoon ondersteund zou moeten worden in CSS )

[ Voor 7% gewijzigd door BlackIce op 27-01-2007 18:47 ]

zaterdag 27 januari 2007 19:00

Acties:

Kiphaas7

icemancool schreef op zaterdag 27 januari 2007 @ 18:42:
afaik is Faux Columns de netste en algemeen best geaccepteerde manier om dit te doen.
Javascript zal best kunnen werken, maar vind ik niet de netste manier. ( hoewel dit eigenlijk gewoon ondersteund zou moeten worden in CSS )

In de link die ik hierboven heb gegeven naar alistapart.com staat in het "holy grail" artikel beschreven hoe je die equal height columns kan krijgen met css zonder javascript, zonder faux columns.

zondag 28 januari 2007 17:40

Acties:

maandag 29 januari 2007 10:16

Bij mij werkt 'ie helemaal niet goed?

Afbeeldingslocatie: http://99procentsap.nl/thumb/85/

In Firefox zijn de kolommen zijn te klein waardoor er tekst verloren gaat, en bovendien worden de kolommen niet gestrekt tot aan de onderkant van het window..

Acties:

Verwijderd

De Holy grail is inderdaad redelijk zinloos. In IE 7 ziet hij de hele linker kollom niet. En onder FF 1.5* lopen de kleuren niet geheel door naar beneden.. (wat bij mijn eigen layout ook het probleem is

)

maandag 29 januari 2007 18:27

Acties:

gvanh

Webdeveloper

Ik heb dit soort ellende vaak opgelost met behulp van JavaScript.

Zoiets als:
* Bepalen van de beschikbare hoogte in het venster is.
* Hoogte van de gewenste div(s) instellen op dit hoogte (+ of - een bepaald aantal pixels)

Vervelende is een beetje, dat de interpetatie van "height: 100%" afhankelijk is van je doctype declaratie. In standaard Internet Explorer 6 modus werkt het redelijk zoals verwacht, maar zodra je overschakelt op Quirksmode of Standard compliance mode, dan wordt 100% een min-of-meer willekeurig gegeven.

Vandaar dat ik het met JavaScript regel ... dan weet ik zeker dat het naar behoren werkt. Maar gut ... het is natuurlijk verre van ideaal.

dinsdag 28 oktober 2008 10:08

Acties:

dinsdag 28 oktober 2008 11:04

Is hier nu inmiddels al een nette css oplossing voor?

Ik zit nu namelijk ook met dit probleem. Zie hier mijn voorbeeld pagina: klik.

Mijn pagina:

HTML:

<body>
<div id="main_container">

<div id="top">
<div id="top_logo"><img src="images/logo.png" /></div>
<div id="top_icons"><img src="images/icon_contact.png" />&nbsp;&nbsp;<img src="images/icon_home.png" /></div>
</div>

<div id="menu">
<div id="menu_back"></div>
<div id="menu_footer"></div>
</div>

<div id="content"></div>

</div>

<div id="footer">f</div>

</body>

Mijn css

Cascading Stylesheet:

html{
height:100%;
}

body{
margin: 0;
text-align: center;
height: 100%;
background-image:url(images/back_top.jpg);
background-repeat:repeat-x;
background-position:top;
background-color:#ff4800;
}

#main_container{
margin: 0 auto 0 auto;
width: 981px;
height: 98%;
text-align: left;
background-color:#000000;
}

#footer{
width:981px;
height:auto;
margin-bottom:0px;
background-color:#fff;
}

#top{
float:left;
width:100%;
}

#top_logo{
float:left;
margin-left:233px;
width:359px;
height:132px;
}

#top_icons{
float:left;
margin-top:15px;
margin-left:271px;
width:58px;
height:19px;
text-align:right;
}

#menu{
float:left;
width: 179px;
}

#menu_back{
width: 179px;
height: 100%;
background-color:#999999;
text-align: left;
}

#menu_footer{
width:179px;
height:auto;
margin-bottom:0px;
background-color:#666666;
}

#content{
}

De main container heeft een footer waardoor de main container 100% kan zijn. In de main container zit dus een header. Daaronder zit een menu. Deze bestaat uit een back en een footer. Ik dacht dus dat ik in de main container opnieuw een footer kon plaatsen om het menu te strekken tot onderaan. Dit lukt dus niet.

Als ik de menu div zelf margin-bottom:0px mee geef werkt het ook niet. De content div moet ook strekken tot beneden maar daar zit nu nog geen css in.

PS. ik heb alles background colors meegegeven voor de duidelijkheid.

Alvast bedankt

Acties:

dinsdag 28 oktober 2008 11:08

*zucht*

Nee, faux columns of javascript zijn voor zover ik weet nog steeds de enige xbrowser werkende oplossingen.

Wat is er mis met faux columns overigens?

[ Voor 18% gewijzigd door Bosmonster op 28-10-2008 11:04 ]

Acties:

dinsdag 28 oktober 2008 11:17

Faux columns gaan niet tot onderaan de pagina als de content in beide columns niet pagina vullend is (toch?).

Acties:

dinsdag 28 oktober 2008 11:19

*zucht*

Cambach schreef op dinsdag 28 oktober 2008 @ 11:08:
Faux columns gaan niet tot onderaan de pagina als de content in beide columns niet pagina vullend is (toch?).

Maar dat is een heel ander probleem dan waar faux columns of zelfs de 'holy grail' artikelen over gaan.

Je bedoelt zoiets:

http://www.bosmonster.nl/html/centered_with_footer.html

(istie weer)

Acties:

dinsdag 28 oktober 2008 13:01

Bosmonster schreef op dinsdag 28 oktober 2008 @ 11:17:
[...]

Maar dat is een heel ander probleem dan waar faux columns of zelfs de 'holy grail' artikelen over gaan.

Je bedoelt zoiets:

http://www.bosmonster.nl/html/centered_with_footer.html

(istie weer)

Exact. Bedankt, zal de pagina eens doornemen.

Acties:

Kiphaas7

Bosmonster schreef op dinsdag 28 oktober 2008 @ 11:17:
[...]

Maar dat is een heel ander probleem dan waar faux columns of zelfs de 'holy grail' artikelen over gaan.

Je bedoelt zoiets:

http://www.bosmonster.nl/html/centered_with_footer.html

(istie weer)

offtopic:
Je sluit 1 p tag niet

dinsdag 28 oktober 2008 13:09

Acties:

dinsdag 28 oktober 2008 13:31

*zucht*

Kiphaas7 schreef op dinsdag 28 oktober 2008 @ 13:01:
[...]

offtopic:
Je sluit 1 p tag niet

Je hebt gelijk, maar die is toch optioneel in HTML4

Ik moet het voorbeeld even wat netter opbouwen, dit is in elkaar geraffeld, maar er wordt zoveel om dergelijke oplossingen gevraagd dat ik van te voren ook niet wist dat ik de url zo vaak zou gebruiken

Acties:

dinsdag 28 oktober 2008 13:50

Het is gelukt en het werkt prima.

Toch vraag ik me af waarom we zo moeilijk moeten doen om dit voor elkaar te krijgen? Dit is toch een pagina indeling die vrij veel mensen gebruiken en dat je dan zo moeilijk moet gaan doen om dit te regelen is toch vrij opmerkelijk?

Kan er niet een nieuwe css versie gereleased worden waarin dit allemaal werkt naar behoren?

Acties: