爲什麼div不是全高？

Question

我想做一個邊欄，它是整個頁面的高度，它嵌套在一個名爲main的div內。

的代碼是：

.main { 
 
    display: flex; 
 
    overflow-y: hidden; 
 
    } 
 
    
 
.sidebar { 
 
    height: 100%; 
 
    background: #212121; 
 
    } 
 

 
.navbar { 
 
    margin: 0; 
 
    padding: 0; 
 
    }

<div class="main"> 
 
    <div class="sidebar"> 
 
    <ul class="navbar"> 
 
     ... 
 
    </ul> 
 
    </div> 
 
</div>

的div默認爲無序列表，這是200像素的大小;儘管我可以將其更改爲其他尺寸，例如"height: 500px"，但由於屏幕尺寸不同，我不想這樣做。

有沒有辦法做到這一點，而不使用視點尺寸，像height: 100%，但實際上工作？

Answer 1

如果您始終想讓您的.main成爲窗口的整個高度（和寬度），那麼您可以絕對定位並拉伸它。

.main { 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    display: flex; 
    overflow-y: hidden; 
} 

取決於你在尋找.main div。