Question

以前曾问过

版本，这些问题对我有所帮助，以至于有一个高度越来越高的弹性物品。但是，它增长得太多了：）

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

非常感谢您的帮助：）

Answer 1

我希望这是您期望的答案。

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

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

Flexbox增长div以占据剩余高度

1 个答案: