时间戳

首页 > 解决方案 > Flexbox 增加 div 以占用剩余高度

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

问题描述

之前已经问过这个版本，这些问题帮助我获得了一个高度增长的弹性项目。但是，它增长太多了:)

请在此处查看代码笔或代码 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 的大小能够增加到足以使页脚完全贴在页面底部的程度。由于创建的空白，我不想要任何滚动。

任何帮助深表感谢 ：）

标签： htmlcsssass

解决方案

我希望这是您所期望的，请查看我的答案。

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

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>

推荐阅读