Geek Answers Handbook

HTML5 / CSS3: layout of heights 100% for mobile devices with two separators as buttons and without overflow

I want to implement some kind of mobile layout with two divs or buttons that fill the entire page from 50% to 50% ( EDIT: under each other). Now when I do this 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>

page is too high. It is hardly surprising that the 10px marker and the 1px border extend the div ... In addition, a div wrapper with 10px filling will not solve the problem.

How could I implement this layout where the page does not scroll (does not overflow), but is 100% high, with two buttons filling the full page (each 50% or 70% - 30% or so), and the button itself has an edge or indents to get a small space on the page border and, for example, 1px a solid border?

^ x3ro

+5
3

, CSS- , ... ( ).

. 

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

, , .

+6

, , ( , ).

, - ? . , .

+1

This is the solution I was looking for: http://jsfiddle.net/WWcfm/10/

Thanks to the Codemonkey code example, placing two rectangles next to each other, I figured out how to set them under each other.

Thank!

#EDIT: Attention!

You will need to use normalize.css . Otherwise, it will look different on your site!

0
source

More articles:


All Articles