如何将页面分成 4 个相等的部分？

Question

我想将我的页面分成四个相等的部分，每个部分具有相同的高度和宽度 (50-50%) 。

我不想使用 JavaScript。如果调整浏览器窗口的大小时，我希望块 （ <div> s） 自动 （相对地） 调整大小。

我已经很长时间没有使用 CSS 了。我不知道该如何处理。

原文由 Santosh Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

演示在 http://jsfiddle.net/CRSVU/

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

div {
  width: 50%;
  height: 50%;
  float: left;
}

#div1 {
  background: #DDD;
}

#div2 {
  background: #AAA;
}

#div3 {
  background: #777;
}

#div4 {
  background: #444;
}

 <div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

原文由 user527892 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您想控制它们与源代码顺序分开放置的位置：

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

div { position: fixed; width: 50%; height: 50% }

#NW { top: 0;   left: 0;   background: orange }
#NE { top: 0;   left: 50%; background: blue }
#SW { top: 50%; left: 0;   background: green }
#SE { top: 50%; left: 50%; background: red }

 <div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>
<div id="SW"></div>

JSFiddle 演示

注意：如果你想在你的区域填充，你需要将 box-sizing 设置为 border-box ：

 div {
  /* ... */
  padding: 1em;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

…否则你的“50%”宽度和高度变成“50% + 2em”，这将导致视觉重叠。

原文由 Phrogz 发布，翻译遵循 CC BY-SA 4.0 许可协议