我有一个带有右侧主体的静态左列。页面加载时，左侧菜单正确适合浏览器。如果我调整浏览器的大小，它仍然可以很好地适应。但是，当右列的主体扩展超过左列时，左侧菜单不会随之扩展(具有动态内容)。
示例:https://jsfiddle.net/037exh8n/
HTML
<body>
<div class="sidebar">
<ul>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</div>
<div class="main">
<div class="content"></div>
</div>
CSS
html,body {
height: 100%;
background-color: #7F7E7E;
color: #000000;
display: flex;
flex-direction: row;
padding: 0;
margin : 0;
}
.sidebar {
height: 100%;
flex: 0 0 250px;
background-color: #000;
padding-left: 20px;
color:white;
}
.main {
flex: 1;
}
如果单击该按钮，您可以看到左侧菜单不会随内容展开。
我错过了什么？我注意到，如果我进入 Chrome 中的调试器，html 主体高度永远不会更新。
谢谢!
最佳答案
它没有按预期工作，因为您显式地将 html/body 元素的高度设置为 100%，然后您将左侧菜单 .sidebar 元素的高度也设置为 100%。
这样做时，左侧菜单的高度不会扩展超过100%(即使您添加更多内容，就像您的情况一样)。您似乎想将这些元素的 min-height 改为 100%。这样做时，高度将至少为 100%，然后根据内容进行扩展。
html, body {
min-height: 100%;
background-color: #7F7E7E;
color: #000;
display: flex;
flex-direction: row;
margin: 0;
}
旁注:自 .sidebar 起，您只需在 html/body 元素上设置 min-height code> 元素是一个 Flexbox 子元素，它将扩展以匹配父元素的高度，在本例中，body 元素的最小高度为 100%。只需完全省略 .sidebar 元素的高度，就像上面的链接示例一样。
或者，您也可以只使用视口(viewport)百分比单位，并直接在 .sidebar 元素上设置 min-height 为 100vh:
.sidebar {
min-height: 100vh;
flex: 0 0 250px;
}
关于html - Flexbox 模型上的左侧菜单不会动态扩展其高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35139947/