div 的高度没有填充 100% 的身高答案

【问题标题】：height of div is not filling 100% body heightdiv 的高度没有填充 100% 的身高
【发布时间】：2022-06-15 01:07:26
【问题描述】：

我有一个侧边栏、一个标题和一个主容器。主容器和标题嵌套在父 div 中。当我为侧边栏和主容器设置高度 100% 时，侧边栏不会占用主体高度的 100%。我在考虑不使用任何百分比值，让 flexbox 完成工作。但我怀疑，当我在主容器区域侧边栏中附加元素时，其行为会相同，并且不会占用主体空间的高度。我该如何解决这个问题？

html {
  height: 100%;
}

body {
  margin: 0;
}

.sidebar {
  display: inline-flex;
  min-height: 100vh;
}

.sidebar-container {
  background-color: #00ffff;
  width: fit-content;
}

.header_main {
  display: inline-block;
  position: absolute;
  color: white;
}

.header {
  background-color: black;
  width: 100vw;
}

.main {
  height: 100vh;
  width: 100vw;
  background-color: bisque;
}

<div class="sidebar">
  <div class="sidebar-container">sidebar</div>
</div>
<div class="header_main">
  <div class="header">header</div>
  <div class="main">main</div>
</div>

【问题讨论】：

您的body 没有指定高度。那么你期望 100% of body 是什么？此外，您的所有元素都没有使用 height: 100%。
我尝试将 min-height: 100% 指定给 body 但它的行为仍然相同 :)
不清楚您的实际要求。你的风格看起来像是一个随机的试错代码。你确定你知道你在做什么？请从您的代码中删除失败的尝试，并将其减少到重现您的问题所需的最低 CSS。然后，更明确地说明您想要实现什么，以及您的示例与您需要的结果有何不同。
如何让侧边栏占据身体高度的 100% 并且不留下任何未填充的空间
height: 100% 表示父母身高的 100%。然而，这需要父级实际具有定义的高度。默认情况下，高度未设置并计算为fit-content。那么 100% 的未设置/未定义是什么？

标签： html css

【解决方案1】：

最简单的方法是使用 CSS-Grid。然后简单地将 body 设置为 grid-container 并给它一个min-height: 100vh：

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: min-content auto;
}

aside {
  width: fit-content;
  background-color: #00ffff;
  grid-row: 1 / -1;
}

header {
  background-color: pink;
}

main {
  background-color: bisque;
}

<aside>Sidebar</aside>
<header>Header</header>
<main>Main</main>

【讨论】：