[HTML] Containerlayer altijd 100% hoogte

[Verwijderd]

Ik ben op zoek naar een oplossing om mijn containerlayer (thevens background van de webpagina) altijd de volledige lengte van de weergegeven pagina te laten benutten, ongeacht de resolutie van de pagina bezoeker, reden hiervoor is dat het ontwerptechnisch mooier is.

Een oplossing is de layer gewoon b.v. 1600 pixels lang te maken en met een javascript workaround de scrollbars hard weg te halen maar dit is niet echt de 'nette' oplossing.

Eigelijk ben ik op zoek naar een CSS code die het zoiets als het volgende moet bereiken:

code:

#container {
    height: 100%;
}

Ik hoop dat het een beetje duidelijk is wat mijn bedoeling is, vele andere bronnen hebben mij helaas nog niet van een antwoord kunnen voorzien

Edit: De ultieme oplossing zou zijn dat de container een minimum lengte van 600px heeft en een maximum van 100%, maar ik ben bang dat dit niet zo makkelijk met een geldige CSS tag voor elkaar te krijgen is

[ Voor 17% gewijzigd door Verwijderd op 25-02-2007 19:10 ]

[Fuzzillogic]

Ik gok dat min-height en max-height je vriend gaan zijn

iets in de vorm van

Cascading Stylesheet:

html {height: 100%}
body {min-height: 100%}
#container {min-height: 600px; max-height: 100%}

Dit werkt niet in verouderde browsers, zoals IE6. Maar aangezien dit gelukkig niet meer de current version is, kun je overwegen om support voor IE6 gewoon te droppen.

Maar ook IE7 kan nog steeds voor problemen zorgen, eventueel de #container (met conditional comments!) een height: 100% geven.

Javascript-oplossingen zijn hoe dan ook ranzig en overbodig, voor dit soort zaken. (zelfs voor IE6, met wat gepruts)

[ Voor 10% gewijzigd door Fuzzillogic op 25-02-2007 19:20 ]

[Verwijderd]

Bedankt voor je reactie Fuzzi! Echter, hoe zeer ik ook mn best heb gedaan nieuwe vrienden te maken, tis niet gelukt

Heb nu de volgende CSS code

Cascading Stylesheet:

html {
    height: 100%;
}

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    min-height: 100%;
}

#container {
    position:absolute;
    width:574px;
    z-index:1;
    left: 140px;
    min-height: 600px; 
    max-height: 100%;
    background-color: #993366;
}

Maar dit veranders niets aan mijn container, deze blijft steken op 600px

[daniëlpunt]

Dat komt omdat hij bij min-height pas groter word wanneer is meer in de DIV staat.

dit zou moeten werken:

Cascading Stylesheet:

body, html {
    height: 100%; 
    margin: 0; 
    padding: 0;
}

#container { 
    height: 100%;
    background-color: #993366;
    width: 574px; 
}

[Fuzzillogic]

@super-muffin, ik vrees dat jouw code niet goed werkt in CSS2-compliant browsers.

Hmm, ik heb nog een uurtje, ik zal even voorbeeldje in elkaar gooien...

[NitroX infinity]

http://www.w3schools.com/htmldom/dom_obj_screen.asp
http://www.w3schools.com/htmldom/prop_screen_availheight.asp

Kun je daar niet iets mee inelkaar flansen?

[Fuzzillogic]

Shit, da's meer dan een uur

Voorbeeld 100% height site.

@NitroX infinity: javascript is nergens nodig voor. Gebruik de juiste tools voor dit soort visuele zaken: CSS in dit geval.

[ Voor 35% gewijzigd door Fuzzillogic op 26-02-2007 01:06 ]

[Verwijderd]

Haha, bedankt voor je tijd Fuzzi en andere meedenkers , het voorbeeld dat je gaf is precies wat ik bedoel!

Ik ga nu even testen of ik het voor elkaar krijg, laat t daarna hier weten

Edit: Voor de bakker, thnx

[ Voor 9% gewijzigd door Verwijderd op 26-02-2007 01:34 ]