[CSS] Container 100% height geven

[Noedels]

Ik heb ruzie met mijn CSS. Ik gebruik de CSS voor de opmaak van een pagina welke bestaat uit twee containers.
De linker container dient een hoogte van 100% te hebben. Nu heb ik de height en min-height codes al geprobeerd, maar geen van allen werkt.

mijn huidige code is:

<style type="text/css">
@import "style.css";

body {
text-align:center;
}

#frame {
width:777px;
margin-right:0px;
margin-left:0px;
margin-top:0px;
padding:0px;
text-align:left;
}

#contentleft {
width:154px;
min-height:100%;
overflow:visible;
padding:0px;
float:left;
background-image:url(gfx/navbg.gif);
}

#contentmain {
width:623px;
padding:0px;
float:left;
background:#FFFFFF;
}
</style>


Wat doe ik hier fout? Ik kan namelijk echt helemaal niets anders meer bedenken, en recente topics hierover voldoen ook niet aan mijn wensen.....

[faabman]

- over welke browser hebben we het?
- 100% hoogte ten opzichte van wat??

[Noedels]

hij moet 100% van het scherm worden onafhankelijk van de resolutie die de gebruiker heeft.
het gaat om IE en mozilla.

[Verwijderd]

je body en html moeten beide op height: 100% gezet worden.
Dat zijn namelijk de containers waarin de rest staat. Staan die niet op 100%, dan zal de rest ook nooit beeldvullend zijn, tenzij je genoeg content hebt uiteraard...
Buiten het feit dat min-height door IE niet ondersteund wordt...

[ Voor 15% gewijzigd door Verwijderd op 16-03-2005 13:18 ]

[Noedels]

heb ik gedaan maar geeft nog steeds niet het gewenste resultaat.

zie:

<style type="text/css">
@import "style.css";

body {
text-align:center;
min-height:100%;
}

#frame {
width:777px;
margin-right:0px;
margin-left:0px;
margin-top:0px;
padding:0px;
text-align:left;
}

#contentleft {
width:154px;
min-height:100%;
overflow:visible;
padding:0px;
float:left;
background-image:url(gfx/navbg.gif);
}

#contentmain {
width:623px;
padding:0px;
float:left;
background:#FFFFFF;
}
</style>

[Verwijderd]

was er niet nog zown topic net pas waar dit ook in besproken werd?

daarin werd deze link gegeven : http://www.alistapart.com/articles/fauxcolumns/ .. tis meer een beetje gezichtsbedrog met een afbeelding, maar het werkte voor mij perfect...

[Noedels]

Verwijderd schreef op woensdag 16 maart 2005 @ 13:29:
was er niet nog zown topic net pas waar dit ook in besproken werd?

daarin werd deze link gegeven : http://www.alistapart.com/articles/fauxcolumns/ .. tis meer een beetje gezichtsbedrog met een afbeelding, maar het werkte voor mij perfect...

dat topic had ik al gevonden en heb die code op die pagina gebruikt, maar wat hij dan doet, dan geeft hij de complete css 100% height. waardoor de bg van de specifieke container over de gehele pagina getrokken word.

[BtM909]

Noedels schreef op woensdag 16 maart 2005 @ 13:15:
heb ik gedaan maar geeft nog steeds niet het gewenste resultaat.

zie:

Cascading Stylesheet:

<style type="text/css">
    @import "style.css";

    body {
        text-align:center;
        min-height:100%;
        }
    
    #frame {
        width:777px;        
        margin-right:0px;
        margin-left:0px;
        margin-top:0px;
        padding:0px;
        text-align:left;
        }
        
    #contentleft {
        width:154px;
        min-height:100%;
        overflow:visible;
        padding:0px;
        float:left;
        background-image:url(gfx/navbg.gif);
        }
        
    #contentmain {
        width:623px;
        padding:0px;
        float:left;
        background:#FFFFFF;
        }
</style>

Noedels zet voortaan je stylesheets eens tussen [plain]

Cascading Stylesheet:

[/] tags. Maakt het duidelijker

[Noedels]

ow sorry..
zal ik doen!

[cannibal]

Je hebt alleen nog steeds niet de container 'html' op height 100% gezet en ook body moet je op 100% zetten (en voor IE zoals gemeld niet met min-height maar met height)

Dan zou het moeten werken (als er verder geen containers (blocks) tussen zitten.

[Noedels]

cannibal74 schreef op woensdag 16 maart 2005 @ 13:55:
Je hebt alleen nog steeds niet de container 'html' op height 100% gezet en ook body moet je op 100% zetten (en voor IE zoals gemeld niet met min-height maar met height)

Dan zou het moeten werken (als er verder geen containers (blocks) tussen zitten.

ja sorry.... wist niet precies wat je bedoelde, maar heb het nu gedaan. maar het werkt nog steeds niet. (het is de eerste keer dat ik op een dergelijke manier met css werk, dus ik zal zelf wel iets fout doen!)

heb hem nu zo:

Cascading Stylesheet:

<style type="text/css">
    @import "style.css";

    html {
        height:100%;
        }
    
    body {
        text-align:center;
        height:100%;
        }
    
    #frame {
        width:777px;        
        height:100%;
        margin-right:0px;
        margin-left:0px;
        margin-top:0px;
        padding:0px;
        text-align:left;
        }
        
    #contentleft {
        width:154px;
        height:100%;
        overflow:visible;
        padding:0px;
        float:left;
        background-image:url(gfx/navbg.gif);
        }
        
    #contentmain {
        width:623px;
        height:100%;
        padding:0px;
        float:left;
        background:#FFFFFF;
        }
</style>

zal overigens ff een voorbeeld online zetten zodat het misschien duidelijker is.

[Noedels]

zie: http://ecommerce.triple-p.nl/test/content.html
bij dit voorbeeld heb ik enkel de body en html 100% height gegeven. dit geeft geen effect.

wanneer ik vervolgens ook de containerleft een height van 100% geef, dan krijg ik het volgende effect:
http://ecommerce.triple-p.nl/test/content1.html
(nu is hij wel scherm vullend, maar alleen iets te overdreven......)

[ Voor 76% gewijzigd door Noedels op 16-03-2005 14:13 ]

[Noedels]

in mozilla doet hij het trouwens helemaal vreemd.....'
daarin negeert hij de aangegeven top en left marges, maar doet hij wel weer de hoogte van de container goed, maar gooit hij opeens container inhoud uit de container.....

[cannibal]

die laatste met containerleft op 100% is
goed. alleen je moet wel even de 100% van je table (zoekdeel) af gooien.

dan moet ie werken (hier doet ie het)
kan ook de file opsturen als je wil.

[Noedels]

cannibal74 schreef op woensdag 16 maart 2005 @ 14:55:
die laatste met containerleft op 100% is
goed. alleen je moet wel even de 100% van je table (zoekdeel) af gooien.

dan moet ie werken (hier doet ie het)
kan ook de file opsturen als je wil.

je hebt helemaal gelijk......
ik kreeg dit net ook in de gaten en kon mezelf dus wel voor men kop slaan......

dit probleem is dus opgelost. Zit ik enkel nog met één probleem. dat is de mozilla gebruikers! mozilla negeert mijn marges.
wat kan ik hier tegen doen? (ik maar denken dat mozilla een goede browser is.....)

[Noedels]

heb trouwens even de nieuwste versie online gezet zodat de echte experts het probleem kunnen zien wat ik nu dus nog met mozilla heb.
http://ecommerce.triple-p.nl/test/content.html


(tevens negeert mozilla de iframe instellingen zie ik.... maarja dat is een probleem voor later!)

[T-MOB]

Mozilla doet het gewoon goed hoor. Centreren hoor je niet met text-align te doen, maar door de juiste margin in te stellen (auto). Daarnaast heeft #contentmain geen hoogte in je CSS. 100% van geen hoogte aan een iframe toekennen is natuurlijk vragen om renderproblemen...

Voor het centreren dus:

Cascading Stylesheet:

body { 
  text-align: center; /* Jeej IE<6 */ }
frame { 
  margin: 0 auto;
  text-align: left; /* Jeej IE<6 */ }

Verder is het verstandig om de default margin en padding van browsers voor wat betreft de body en/of html even ongedaan te maken als je met 100% height en/of width werkt. Dat voorkomt ongewenste scrollbalken...

[ Voor 43% gewijzigd door T-MOB op 16-03-2005 15:31 ]

[Noedels]

heb jij dan geen witregel in mozilla boven de content? ik wel namelijk.....

ik heb je adviezen overigens opgevolgd! dankje.

[ Voor 192% gewijzigd door Noedels op 16-03-2005 15:43 ]