CODEWITHSUNDEEP
htmlcssheight
x3ro
x3ro

Reputation: 328

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

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;
}

<section>
    <div>text1</div>
</section>
<section>
    <div>text2</div>
</section>

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

Upvotes: 5

Views: 12301

Answers (3)

Darek Rossman
Darek Rossman

Reputation: 1323

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.

Upvotes: 6

x3ro
x3ro

Reputation: 328

This is the solution i've been looking for: http://jsfiddle.net/WWcfm/10/

Thanks to Codemonkey's code example, placing two boxes right beside each other, I figured out how to set them underneeth each other.

Thank you!

#EDIT: Attention!

You'll need to use normalize.css. Otherwise it would look way different on your site!

Upvotes: 0

Hubro
Hubro

Reputation: 59408

I would read this article on design for mobile devices if that's what you're designing for (there are more links at the bottom of the page you should follow).

And for your layout, do you mean something like this? I would recommend using absolute positioning when making designs like this. It makes everything much easier and it doesn't need flow layout anyway.

Upvotes: 1

Related Questions