兩個一個在另一個之下每個一個50％高度

Question

我需要建立一個在另一個下面的兩個div的結構，每個都需要50％的高度，並且他們需要在此之間具有20px的高度邊距。

是否有可能沒有js呢？

Answer 1

下面應該工作：

HTML

<div class="one"></div> 
<div class="two"></div> 

CSS

.one, .two { 
    position: absolute; 
    width: 100%; 
    height: 50vh; 
} 
.one { 
    background-color: red; 
    margin-bottom: 10px; 
} 
.two { 
    background-color: blue; 
    top: 50vh; 
    margin-top: 10px; 
} 

Answer 2

你可以嘗試使用視臺（vh）如下。

將每個div的高度設置爲50vh，這將佔用屏幕高度的50％。

但是，要獲得20px的邊距，您需要將每個div的高度減少10px，以便爲邊距留出空間。

由於您是混合單元，因此您需要使用CSS calc函數，其中的 可能不被瀏覽器支持。

如果是這種情況，請嘗試在vh單位中設置邊距高度，然後您可以省略calc。

請注意包含div的封閉塊。在我的示例中，我將body的頁邊距設置爲零以防止垂直滾動（我假設您不需要）。

body { 
 
    margin: 0; 
 
} 
 
.top { 
 
    background-color: lightgray; 
 
    height: calc(50vh - 10px); 
 
    margin-bottom: 20px; 
 
} 
 
.bottom { 
 
    background-color: lightgray; 
 
    height: calc(50vh - 10px); 
 
}

<div class="top">Top...</div> 
 
<div class="bottom">Bottom...</div>