css - 将页面分成象限

Question

我想将一个网页分成 4 个相等的象限。这些象限应填满整个页面，并根据窗口大小折叠。象限需要填满窗口的整个视口(viewport)。

我可以使用 vh 和 vw 并让它工作，但我知道它的支持相当不稳定。

理想情况下，任何解决方案都适用于 bootstrap.css 但不是必需的。

非常感谢

Answer 1

只需使用 width: 50% 和 height: 50% 4 次，然后添加 left: 50% 和 top: 50 % 与 position: absolute;:

div {
  height: 50%;
  width: 50%;
  position: absolute;
  top: 0%;
  left: 0%;
  background: blue;
}
#or {
  left: 50%;
  background: lime;
}
#ul {
  top: 50%;
  background: red;
}
#ur {
  top: 50%;
  left: 50%;
  background: yellow;
}

<div id="ol"></div>
<div id="or"></div>
<div id="ul"></div>
<div id="ur"></div>