将页面切成象限

Question

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

我可以使用vh和vw并让它工作，但我知道它的支持是相当有趣的。

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

非常感谢

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;