使元素高度整页答案

【问题标题】：Make element height full page使元素高度整页
【发布时间】：2020-10-28 13:35:43
【问题描述】：

我正在为我的页面设计使用一些 Material-ui。我有几个网格元素，它们根据随机选择的菜单加载：

黄色网格是菜单。 1,2 和 3 是它的选项。每个选项都是不同的页面（url），但菜单在所有选项中都是相同的，并且是在其中导入的。每个不同的页面都有不同的高度 - 例如，示例 (1) 中的选定选项的高度非常小。但选项 2 非常长，高度超过 100vh。我为我的菜单（黄色）添加了 100vh 的高度，但是当我选择选项 2 时它变得太短了：

如您所见，红线表示菜单结束。我怎样才能使这个菜单将页面填充到底部，因为height: "100vh" 仅适用于较小的页面。

【问题讨论】：

没有 HTML 很难分辨，您可以在侧边栏中使用 height: 100%，但我不确定这是否可行。因为height: 100% 使侧边栏高度与其父级高度相同。
是的，height:100% 使侧边栏与父 div 一样高。也许我还是应该坚持下去

标签： html css sass material-ui material-design

【解决方案1】：

尝试将 height: 100% 添加到您的黄色区域 css..

.sidenav {
  height: 100%;
  --
  --
}

【讨论】：

取决于父元素。
是的，@Pain 是对的。 100% 的高度是不行的，我已经试过了 :)

【解决方案2】：

身高：100%

或者使用 flexbox，这样你就有了

<div class="whole-page">
  <div class="sidebar">
  </div>
  <div class="content">
  </div>
</div>

.whole-page {
  display: flex;
}

https://codepen.io/agakesik/pen/NWxYQJY

它会自动使用全高

【讨论】：