固定div（左邊的菜單）不能100％滾動時填充

Question

我可以使用一些幫助來解決這個CSS問題。基本上，我有3個部分。

div class="app-container"> 
    <div class="menu"> 
    </div> 
    <div class="content"> 
    </div> 
</div 

菜單div應該包含我的菜單。它應該以固定的寬度顯示在左側。高度也應該是100％。

內容div應該使用可用寬度的剩餘部分。

這就是我的網站現在的樣子。

的問題發生時，有它更多的內容的權利，你需要向下滾動查看。發生這種情況時，我的菜單不會跟隨。

這就是它有多少內容時的樣子。 （你可以看到，我已經向下滾動右）

代碼

html, body { 

} 

.app-container { 

} 

.menu { 
    height: 100%; 
    width: 16rem; 
    top: 0; 
    left: 0; 
    background-color: #2D3E50; 
    color: white; 
    padding: 1rem; 
    position: absolute; 
} 

.content { 
    padding: 1rem; 
    padding-left: 17rem; 
    background-color: white; 
    height: 100%; 
} 

正如你所看到的，我已經做了填充左上的內容，並填充在絕對位置的菜單中。

無論您向下滾動多遠，該怎麼做，菜單會一直持續下去？

更新

Answer 1

嘗試使用position: relative;到body和position: absolute;你的菜單元素。將菜單的高度設置爲100％。