css - Troubles achieving a simple layout ( 2 rows each a different colour ) -


i having trouble achieving layout header takes 50% of viewport height , 100% of width , footer takes 50% of viewport height , 100% of width. header supposed green , footer white.

the colours working, not heights. heights fitting amount of content each element has.

any idea why , how fix it?

also, know heights add more 100%. i'm trying trigger scroll-bar, too.

html:

<header></header> <footer></footer> 

css:

html, body {     height: 100%; }  header, footer {     height: 50%;     width: 100%; }  header {     background: green; } 

demo

the trick make sure html , body elements set 100% height.


Comments

Popular posts from this blog

ios - iPhone/iPad different view orientations in different views , and apple approval process -

java Extracting Zip file -

C# WinForm - loading screen -