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

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 box-sizing - 大多数移动浏览器都支持它...(我在示例中包含了供应商前缀)。

参见示例 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; 
}

box sizing 属性确保元素的高度和宽度不受边框、填充或边距的影响。