固定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％。