html - Flexbox 增长 div 以占用剩余高度

这个版本之前已经被问过，这些问题帮助我得到了一个高度增长的 flex 元素。然而，它长得太大了:)

请看代码笔或这里的代码 https://codepen.io/surf-n-code/pen/wvwrbKW

基本上我有这个代码

html,
body {
  height: 100%;
}

.container {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.box {
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 36px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-1 {
  background-color: green;
  height: 60px;
}

.box-2 {
  background-color: blue;
  flex: 1;
}

.box-3 {
  background-color: red;
  height: 60px;
}

<body>
  <header>
    <div class="box box-0">Header - sticks to top</div>
  </header>

  <main class="full-height">
    <div class="nd_container">
      <div class="box box-1">content</div>
      <div class="box box-2">Flex grow</div>
    </div>
  </main>

  <footer>
    <div class="box box-4">Footer - stick to bottom</div>
  </footer>
</body>

我希望 box-2 的大小增加到足以使页脚正好贴在页面底部。由于创建了空白，我不想进行任何滚动。

非常感谢任何帮助:)

最佳答案

我希望这就是您所期待的，看看我的回答。

注意:在全屏模式下查看我的答案

box-2 增加大小，使页脚恰好贴在页面底部。

html,
body {
  height: 100%;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-flow: column;
}
.nd_container {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-flow: column;
}

.nd_container .box {
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 36px;
  padding: 20px;
  justify-content: center;
}

.nd_container .box-1 {
  background-color: green;
  flex: 0 1 60px;
}

.nd_container .box-2 {
  background-color: red;
  flex: 1 1 auto;
}

.box {
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box.box-0 {
  background-color: #03a9f4;
  height: 100%;
}

.box.box-4 {
  background-color: #0c5460;
  height: 100%;
}

header {
  flex: 0 1 155px;
}

main {
  flex: 1 1 auto;
}

footer {
  flex: 0 1 155px;
}

<body>
  <header>
    <div class="box box-0">Header - sticks to top</div>
  </header>
  <main class="full-height">
    <div class="nd_container">
      <div class="box box-1">content</div>
      <div class="box box-2">Flex grow</div>
    </div>
  </main>
  <footer>
    <div class="box box-4">Footer - stick to bottom</div>
  </footer>
</body>

关于html - Flexbox 增长 div 以占用剩余高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57776316/

html - Flexbox 增长 div 以占用剩余高度

上一篇：javascript - 如何在 Bootstrap 的选项卡中添加链接？

下一篇：css - 具有不同轮廓重量的图标 - 是否可以调整？