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

请参阅示例此处

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

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

Answer 2

如果这就是您的设计目的（有您应该关注页面底部的更多链接）。

对于您的布局，您的意思是类似的东西吗？我建议在进行这样的设计时使用绝对定位。它使一切变得更加容易，并且无论如何都不需要流程布局。

Answer 3

这是我一直在寻找的解决方案： http://jsfiddle.net/ WWcfm/10/

感谢 Codemonkey 的代码示例，将两个框并排放置，我弄清楚了如何将它们设置在彼此下方。

谢谢你！

#EDIT：注意！

您需要使用 normalize.css。否则它在您的网站上看起来会很不一样！