HTML5/CSS3:移动设备的100%高度布局,两个div作为按钮,没有溢出

Question

我想实现一些带有两个div或按钮的移动布局,整个页面占50%到50%(编辑:彼此之下).现在,当我使用此代码时

* {
    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>

页面太高了.因为10px的边距和1px的边框扩大了div而不足为奇......而且填充10px的包装div也无法解决问题.

如何在页面不滚动(不溢出)但100%高度的情况下实现这种布局,两个按钮填满整个页面(每个按钮在50%或70% - 30%左右),而按钮本身有余量或填充以获得页面边框的小空间和例如1px实线边框？

先感谢您

^ x3ro

Answer 1

为了使它更简单,你不能只使用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; 
}

框大小调整属性可确保元素的高度和宽度不受边框,填充或边距的影响.