[CSS] Adaptive height in procenten

[Beatboxx]

Hi,

Ik ben een website aan't bouwen, die ik in ieder geval adaptive wil maken. Responsive wordt ie ook, maar dat is nu niet aan de orde.

Allereerst een plaatje (Klikken voor groot), zo wil ik het ongeveer hebben:


Ik heb m'n classes dus ongeveer zo ingericht:

Cascading Stylesheet:

.HTML {
    min-width: 100%;
    height: 100%;
}

.page {
    margin-top: 4.3%; /* 215px : 4960px */
    margin-left: 4.76%; /* 172px : 3615px */
    margin-right: 4.6%; /* 168px : 3615px */
    height: 100%;
}


.header {
    width: 100%;
    height: 13.95%; /* 661px : 4737px */
}

    .logo {
        margin-left: 7.51%; /* 246px : pagewidth */
        width: 28%; /* 918px : pagewdith */
        height: auto;
        float: left;
    }
    
    .searchbox {
        margin-top: 24.4%; /* 161px : 661px */
        float:right;
        width: 22.4%; /* 737px : pagewidth */
         }

Dat plaatje lukt prima, maar de 'searchbox' gaat veeeel te ver naar beneden. De margin-top lijkt wel t.o.v. de hele pagina, dus HTML, ipv de 'header'. Hij komt in ieder geval totaal op de verkeerde plek. Iemand een idee hoe dat kan?

Verder heb ik een oranje balk ergens in de header, die nu niet in de css staat. Die heb ik ook een adaptive height gegeven in procenten, maar die krijgt dan vervolgens in Chrome (meest recente versie) een height van 0px. Iemand een idee hoe dat kan?

[sjimster]

waarom maak je page niet gewoon ...% breed! b.v 80% van de browser en dan margin:auto; en div jes gebruiken in plaats van class want je gebruik die elementen maar ik keer op de pagina neem ik aan!

[OkkE]

Ik denk dat je het beste even een testcase online kunt zetten, zonder de precieze HTML is het wat lastig gokken waar het precies mis gaat.

[Beatboxx]

Heb 'm even online op m'n eigen server gezet, en alle divs een border gegeven voor de duidelijkheid... http://bastiaanzwanenburg.nl/test/aboutus.html

EDIT: In jsfiddle: http://jsfiddle.net/mdTyM/ (Maar klopt nog minder, door de procenten. Raad je dus aan om bovenstaande link te bekijken)

[ Voor 49% gewijzigd door Beatboxx op 28-11-2012 17:42 ]

[Nedra]

Ik denk dat het komt omdat de header geen hoogte meekrijgt. Omdat het een child element is van divs die de hoogte 100% heeft megekregen kan het vanuit daar niet berekenen wat x% van 100% is. Wanneer je overflow:hidden of een float toevoegt aan je header zul je dan ook zien dat ie net zo groot wordt als de inhoud. Wanneer je 'position:absolute;' toevoegt haal je je header uit de normale flow van het document en zul je zien dat ie wel een bepaalde hoogte meekrijgt. Ik hoop dat je hiermee weer verder kan puzzelen, en someone please correct me if i'm wrong

[FotW]

Nedra heeft gelijk, sowieso een overflow: hidden op je header omdat je de child divs float en dus de normale document flow doorbreekt heeft je header feitelijk geen hoogte.
Echter lost dat je probleem nog niet op. Als je html, body { height: 100%; } gebruikt kom je al een heel eind denk ik.

[P.O. Box]

Beatboxx schreef op woensdag 28 november 2012 @ 17:40:
Heb 'm even online op m'n eigen server gezet, en alle divs een border gegeven voor de duidelijkheid... http://bastiaanzwanenburg.nl/test/aboutus.html

EDIT: In jsfiddle: http://jsfiddle.net/mdTyM/ (Maar klopt nog minder, door de procenten. Raad je dus aan om bovenstaande link te bekijken)

met een margin-top van 24,4% is het toch logisch dat de search balk zo ver naar beneden staat?

[R4gnax]

Een klein maar toch fundamenteel detail dat iedereen altijd weer vergeet:

Procentueel opgegeven margin en padding wordt altijd berekend ten opzichte van de breedte van het parent element. Dat is dus ook het geval voor top en bottom padding en margin...

(Om het interessant te houden is dat dan weer niet zo voor de top en bottom properties die je gebruikt in combinatie met positioning.)

[ Voor 24% gewijzigd door R4gnax op 28-11-2012 23:49 ]

[Bosmonster]

Je bent nu ALLES in procenten aan het doen. Wil je werkelijk dat je hele site kleiner wordt als je schaalt (inclusief marges, etc)? Of wil je dat alles enigszins meeschaalt?

Marges gewoon in pixels houden en hoogtes op auto en je hebt al een stuk minder gedoe.

Een voorbeeld van hoe je responsive en liquid kunt combineren: floraholland.com

[ Voor 28% gewijzigd door Bosmonster op 30-11-2012 13:23 ]