100vh 不遵循兄弟内容高度答案

【问题标题】：100vh doesn't follow sibling content height100vh 不遵循兄弟内容高度
【发布时间】：2022-12-11 11:15:15
【问题描述】：

我有这个结构

<div className="container">
  <div className="sidebar">
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
  </div>
  <div className="preview">Start editing to see some magic happen!</div>
</div>

这个CSS

.container {
  display: flex;
  gap: 20px;
}

.sidebar {
  width: 100px;
  border: 1px solid;
  overflow-x: scroll;
  height: 100vh;
}

.sidebar-item {
  margin: 10px;
  border: 1px solid;
  height: 80px;
  margin-bottom: 10px;
}

.preview {
  border: 1px solid;
  height: 600px;
}

我希望边栏高度跟随预览高度，我不能将它设置为 600px，因为它可能是动态的。在这种情况下，我想知道为什么使用height: 100vh 不起作用，它似乎更短；

【问题讨论】：

标签： html css

【解决方案1】：

因为 100vh 是 100% 的视口，而不是任何父元素或兄弟元素。如果您想要一个 600 像素高的预览部分，旁边有一个侧边栏在超过该高度后会溢出，请将高度应用于容器元素。弹性框默认将使容器的子项高度为 100%。

.container {
  display: flex;
  gap: 20px;
  height: 600px;
}

.sidebar {
  width: 100px;
  border: 1px solid red;
  overflow-x: scroll;
}

.sidebar-item {
  margin: 10px;
  border: 1px solid blue;
  height: 80px;
  margin-bottom: 10px;
}

.preview {
  border: 1px solid green;
}

<div class="container">
  <div class="sidebar">
    <div class="sidebar-item"></div>
    <div class="sidebar-item"></div>
    <div class="sidebar-item"></div>
    <div class="sidebar-item"></div>
    <div class="sidebar-item"></div>
    <div class="sidebar-item"></div>
    <div class="sidebar-item"></div>
    <div class="sidebar-item"></div>
  </div>
  <div class="preview">Start editing to see some magic happen!</div>
</div>

【讨论】：