将屏幕分割成 4 个 50% 高 50% 宽的矩形答案

【问题标题】：Split screen into 4 rectangles with 50% height 50% width将屏幕分割成 4 个 50% 高 50% 宽的矩形
【发布时间】：2011-04-24 13:55:07
【问题描述】：

我无法将屏幕拆分为 4 个宽度和高度为 50% 的 div。获得 50% 的宽度并让它们浮动是没有问题的，但我怎样才能让它们每个的高度都达到屏幕的 50%？

【问题讨论】：

标签： html height width css

【解决方案1】：

我想你已经习惯了设置你的宽度；同样的东西也可以用于你的身高。

例如：

<html>
<head>
</head>
<body>

<div style="background-color:red; width:50%; height:50%; float:left">
</div>

<div style="background-color:blue; width:50%; height:50%; float:right">
</div>

<div style="background-color:green; width:50%; height:50%; float:left">
</div>

<div style="background-color:orange; width:50%; height:50%; float:right">
</div>

</body>
</html>

如果您运行此程序，您的屏幕中将有 4 个相等的部分，左上角为红色，右上角为蓝色，左下角为绿色，右下角为橙色。

编辑这适用于以下样式：

html,body {
        padding:0;
        margin:0;
        height:100%;
        min-height:100%;
      }

【讨论】：

不明白为什么元素现在伸展到 50% 的高度。但他们确实如此。