将页面分成象限

Question

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

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