Question

我有一个带有右侧身体的静态左栏。在页面加载时，左侧菜单正确适合浏览器。如果我调整浏览器大小，它继续很好地适应。但是，当右列的主体扩展超过左列时，左侧菜单不会随之扩展（带有动态内容）。

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体高度永远不会更新。

谢谢！

Answer 1

它没有按预期工作，因为您明确将html / body元素的高度设置为100%，然后您设置了左侧菜单.sidebar元素高度也为100%。

这样，左侧菜单的高度不会超出100%（即使您添加了更多内容，例如您的情况）。您似乎希望为这些元素添加min-height 100%。这样，高度至少为100%，然后根据内容进行扩展。

Updated Example

html, body {
  min-height: 100%;
  background-color: #7F7E7E;
  color: #000;
  display: flex;
  flex-direction: row;
  margin: 0;
}

附注：您只需在min-height / html元素上设置body，因为.sidebar元素是一个弹性框子元素，它将展开以匹配父元素element的高度，在本例中为body元素的最小高度100%。只需省略.sidebar元素上的高度，就像上面链接的示例一样。

或者，您也可以使用视口百分比单位并直接在min-height元素上设置100vh .sidebar：

Updated Example

.sidebar {
  min-height: 100vh;
  flex: 0 0 250px;
}

flexbox模型上的左侧菜单没有动态扩展它的高度

1 个答案: