將頁面分成象限

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>