孩子的身高限制在父母的剩余空间内答案

【问题标题】：Child's height restricted to parent's remaining space孩子的身高限制在父母的剩余空间内
【发布时间】：2016-03-09 23:13:00
【问题描述】：

我应该如何使用 CSS3 设置滚动框类以将其高度调整到其父级的所有剩余空间。即使滚动框内容很长，滚动框也不应更改其父级的高度。在这种情况下，滚动框应该显示滚动条。有可能吗？

div {
  margin: 0;
  border-radius: 12px;
  padding: 6px;
  background-color: white;
}
body {
  margin: 0px;
  width: auto;
  height: 100vh;
  display: grid;
  grid: 20vw 1fr / 20vh 1fr;
  grid-template-areas: "top-left main""bottom-left  main";
  grid-row-gap: 4px;
  grid-column-gap: 4px;
}
.top-left {
  grid-area: top-left;
  background-color: lightblue;
}
.bottom-left {
  grid-area: bottom-left;
  background-color: lightgreen;
}
.main {
  grid-area: main;
  background-color: lightpink;
}
.scrollbox {
  background-color: white;
}

<body>
  <div class="top-left">
    Top-Left
  </div>
  <div class="bottom-left">
    Bottom-Left
    <div class="scrollbox">
      <svg viewBox="0 0 2000 2000">
        <circle cx="1000" cy="1000" r="1000" />
      </svg>
    </div>
  </div>
  <div class="main">
    Main
    <div class="scrollbox">
      <svg viewBox="0 0 2000 2000">
        <circle cx="1000" cy="1000" r="1000" />
      </svg>
    </div>
  </div>
</body>

【问题讨论】：

标签： javascript html css grid-layout

【解决方案1】：

如果通过“将其高度调整为其父级的所有剩余空间”您指的是100vh 的主体高度，则scrollbox 类也不是真正的问题。您可能想要的是将 body 的所有直接子级限制到特定高度，总之，它小于 body 的高度。

即如果身体有 3 个孩子，每个孩子的身高都是 100/3 个单位，所以你只需要这样的东西：

body>*{
  max-height: 33.33333333vh;
  overflow-y: auto;
}

overflow 属性添加了你想要的垂直滚动条。为了确保只有 scrollbox 类具有特定的高度和那些滚动条，您可以以类似的方式引用它们：

body>*>.scrollbox {
  max-height: 30vh;
  overflow-y: auto;
}

但是，我想知道您为什么要给身体那么高？ vh是particular unit，body标签中的100vh相当于写100%：

使用 vw/vh，我们可以根据视口的大小调整元素的大小。 vw/vh 单位的有趣之处在于 1 个单位反映了视口宽度的 1/100。例如，要使元素具有视口的整个宽度，您可以将其设置为 width:100vw。

这是你的 sn-p：

div {margin: 0;border-radius: 12px;padding: 6px;background-color: white;}
body {margin: 0px;width: auto;height: 100vh;display: grid;grid: 20vw 1fr / 20vh 1fr;grid-template-areas: "top-left main""bottom-left  main";grid-row-gap: 4px;grid-column-gap: 4px;}
.top-left {grid-area: top-left;background-color: lightblue;}
.bottom-left {grid-area: bottom-left;background-color: lightgreen;}
.main {grid-area: main;background-color: lightpink;}
.scrollbox {
  background-color: white;
}
body>*>.scrollbox {
  max-height: 30vh;
  overflow-y: auto;
}

<body>
  <div class="top-left">
    Top-Left
  </div>
  <div class="bottom-left">
    Bottom-Left
    <div class="scrollbox">
      <svg viewBox="0 0 2000 2000">
        <circle cx="1000" cy="1000" r="1000" />
      </svg>
    </div>
  </div>
  <div class="main">
    Main
    <div class="scrollbox">
      <svg viewBox="0 0 2000 2000">
        <circle cx="1000" cy="1000" r="1000" />
      </svg>
    </div>
  </div>
</body>

【讨论】：

我是新手，所以我不知道正确的术语、单位等。抱歉。
我想达到什么目的？我只希望两个白色 div（滚动框）始终与绿色（左下）和粉红色（主）div 的整个可用空间对齐。
@PiotrAntoniak 我对vh 也不是很熟悉，它对于不同的视口（响应式设计）来说是一个有用的单元。 max-height 允许您将内部内容的高度限制为特定空间，但如果您真的希望它们保持在同一个位置，即使它们小于 max-height，您可以使用 height。
我会尝试同时使用两者。 height 设置滚动框的高度和 max-height 以防止滚动框在长内容的情况下扩展）。但问题是如何正确设置它们？我尝试了 100%、100vh 等，但它没有像我预期的那样工作。
@PiotrAntoniak 你真的想在体内使用 100% 还是 100vh？我的意思是，由于您想使用该页面的所有空间，您只需将 100 除以您想要放置在那里的滚动框的数量。该值将是每个滚动框的高度（减去该页面中其他元素的空间）。