Question

我应该如何使用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>

Answer 1

如果通过＆＃34;将其高度调整到其父母的所有剩余空间＆＃34;你指的是身体100vh的身高，scrollbox类也不是真正的问题。您可能想要的是将身体的所有直接儿童限制在特定的高度，当总结时，该高度小于身体的高度。

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

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

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

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

然而，我想知道你为什么要给身体那么高？ vh是particular unit，而且正文标记中的100vh与写100％相同：

使用vw / vh，我们可以将元素的大小设置为相对于视口的大小。 vw / vh单位很有意思， 1单位反映视口宽度的1/100 。例如，要使元素成为视口的整个宽度，您可以将其设置为宽度：100vw。

这里是你的代码片段：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

孩子的身高仅限于父母的剩余空间

1 个答案: