将页面分成象限

Question

我想把一个网页分成4个相等的象限。这些象限应填满整个页面，并折叠到 window 大小。象限需要填满 window.

的整个视口

我可以使用 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>

将页面分成象限

Slitting a page into quadrants

css

viewport