css 如何让嵌套的div占用可用的高度？

ccgok5k5 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(169)

我想拥有。expandToFill div展开以填充剩余的屏幕高度。我用flexbox做了一些东西，因为这似乎是最简单的解决方案。它必须以这种方式嵌套，请不要更改html。
对象的高度值。菜单分区

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.router {
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: column;
}

.menu {
  background-color: red;
  height: 20px;
}

.expandToFill {
  flex-grow: 1;
  background-color: blue;
}

<div class="wrapper">
  <div class="router">
    <div class="container">
      <div class="menu">
      </div>
      <div class="expandToFill">
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/BAR24/a2m4cjsw/17/
SO上也有类似的问题，但他们没有问嵌套的可扩展div。
编辑：我接受了一个答案，但意识到它并没有完全解决这个问题。我认为这是一个非常普遍的问题，值得一个全面的工作解决方案。

css

来源：https://stackoverflow.com/questions/76031020/how-to-have-nested-div-take-up-available-height

2条答案

按热度按时间

brgchamk1#

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.router {
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%; /* <<------------ HERE */
}

.menu {
  background-color: red;
  height: 20px;
}

.expandToFill {
  flex-grow: 1;
  background-color: blue;
}

<div class="wrapper">
  <div class="router">
    <div class="container">
      <div class="menu">
      </div>
      <div class="expandToFill">
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-05-02

hi3rlvi22#

解决这个问题的最简单的方法是添加：

.wrapper * {
  height: 100%;
}

*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrapper * {
  height: 100%;
}

.router {
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: column;
}

.menu {
  background-color: red;
  height: 20px;
}

.expandToFill {
  flex-grow: 1;
  background-color: blue;
}

<div class="wrapper">
  <div class="router">
    <div class="container">
      <div class="menu">
      </div>
      <div class="expandToFill">
      </div>
    </div>
  </div>
</div>

JS Fiddle demo。
之所以这样做，是因为它确保了所有元素都占据了可用的全部垂直空间（.menu除外，它的高度是专门设置的），这允许以下规则：

.expandToFill {
  flex-grow: 1;
}

以生效，因为元素现在有一个定义的空间，它可以扩展到其中。

赞(0）回复(0）举报 2023-05-02

我来回答

css 如何让嵌套的div占用可用的高度？

2条答案

相关问题

热门标签

最新问答