css - section covering 100% height of the viewport -

css - section covering 100% height of the viewport -

i made lot of research on site (and others) can't solve problem… on website : http://vintagebike.fr/t%c3%a9t%c3%a9/ want each sections covers 100% of height of viewport… set @ min-height : 100% eachs… set html, body @ height : 100%

some code :

html{ overflow-y:scroll; font-size:100%; font-family:arial,helvetica,sans-serif; line-height:1.5; background:url(...) repeat top left; font-color:#353232; height:100%;} body{ height:100%; background:#fff; float:left; width:100%; font-size:.8125em; color:#353232;} #about{background-color: #cde2f3;position:relative;min-height:100%;} #elements{background-color: #fbe2e4;position:relative;min-height:100%;} #pourqui{background-color: #ffedc1;position:relative;min-height:100%;} #contact{background-color: #ddeee4;position:relative;min-height:100%;}

if set height in pixels it's working…

i don't understand…

thanks in advance.

(sorry english)

read specification of percentage height. has nil viewport. since have body {height:100%}, body grows, becomes element used represent 100%, not viewport.

you need set section height using javascript based on browser's viewport size.

bonne chance.

specifies percentage height. percentage calculated respect height of generated box's containing block. if height of containing block not specified explicitly (i.e., depends on content height), , element not absolutely positioned, value computes 'auto'. percentage height on root element relative initial containing block. note: absolutely positioned elements containing block based on block-level element, percentage calculated respect height of padding box of element. alter css1, percentage calculated respect content box of parent element.

height css