Question

I’m building something for a schoolproject.. and I’m probably wrong with my current code, since it’s not what I want.. So I would like to ask for support!

First of all: All must be in percentages, since it’s for Mobile phone screens and all is based on the resolution. I want all things relatively equal in size, so I assume percentages are best here.

Well the think I need is

Row 1 height:20%
[Block one width:60%][Block two width: 40%]

Row 2 height: 60%
[Block one width:100%]

Row 3 (footer) height: 20%
[Block one width: 100%]

Row 1 must at all time be at the top (duh)
Row 2 must be next, be in centered all the time and must have a fixed height of 60% of screen height, no matter what is in there
Row 3 must be as footer and comes below row 2 (duh)

I think there isn’t much of big code in here..
But I can’t figure the fixed height, since my ‘footer’ always comes directly after row 2, instead of the total bottom..

Thanks in advance!

Answer 1

Sounds like your question is really just about setting the height.

That problem is (likely) your percentages are only based on the body tag, which is only big enough for all your content. Try this:

html, body
{
    height: 100%;
}
div {
    border-style:solid;
    border-width:1px;
}
div#top { height:20%; }
div#middle {height: 60%; }
div#bottom {height: 20%; }

​See http://jsfiddle.net/nhw5X/2/ to play with it

Related to Make body have 100% of the browser height