Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

HTML5 / CSS3: 100% height layout for mobile with two divs as buttons and no overflow

HTML5 / CSS3: 100% height layout for mobile with two divs as buttons and no overflow

Problem

I want to realize some mobile layout with two divs or buttons that fill the whole page 50% to 50% (EDIT: underneath each other). Now when I do it with this code

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

section {
    height: 50%;
}

section>div {
    height: 100%;
    border: 1px solid black;
    margin: 10px;
}
text1
text2

the page is way too high.. Hardly surprising as the 10px margin and the 1px border enlarge the div... Also a wrapper div with a padding of 10px won't solve the problem.

How could I realize this layout where the page is not scrolling (not overflowing) but 100% heigh, with two buttons filling out the complete page (each at 50% or 70% - 30% or so) while the button itself has a margin or padding to get a small space to the page border and a e.g. 1px solid border?

Thank you in advance

^x3ro

Problem courtesy of: x3ro

Solution

To make it even more simple, couldn't you just use CSS box-sizing - which would be supported in most mobile browsers...(I included vendor prefixes for the example).

See example here

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

section {
    height: 50%;
    width: 100%;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
}

section div {
    height: 100%;
    background-color: #333;
    border: 1px solid orange;
    color: white;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
}

The box sizing property ensures that the Height and width of an element aren't affected by borders, padding, or margins.

Solution courtesy of: Darek Rossman

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

HTML5 / CSS3: 100% height layout for mobile with two divs as buttons and no overflow

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×