Question

TL：DR;是否可以将min-height:100%的孩子设置为min-height:100%？

我的#body-container是一个全宽容器，而我的.bg-container只是一个920px的容器。

As pen
作为片段

＆＃13;

html,
body {
  height: 100%;
  background-color: black;
}

#body-container {
  min-height: 100%;
  background-color: red;
}

.bg-container {
  width: 920px;
  margin: 0 auto;
  background-color: blue;
  min-height: 100%;
}

＆＃13;

<div id="body-container">
  
  <div class="bg-container">
    foo bar
  </div>
  
</div>

＆＃13;

Answer 1

当然，只需将height:100%和overflow:auto添加到#body-container：

＆＃13;

html,
body {
  height: 100%;
  background-color: black;
}
#body-container {
  height: 100%;
  min-height: 100%;
  overflow:auto;
  background-color: red;
}
.bg-container {
  width: 920px;
  margin: 0 auto;
  background-color: blue;
  min-height: 100%;
}

＆＃13;

<div id="body-container">

  <div class="bg-container">
    foo bar
  </div>

</div>

＆＃13;

Answer 2

最简单的解决方法是使用viewport percentage units。在这种情况下，100vh将起作用，因为元素无论如何都是相对于视口的。如果元素相对于视口未定位，则始终可以使用calc()来替换值。

这样做，您无需在任何父容器上设置height / min-height：

html,
body {
  background-color: black;
}
#body-container {
  background-color: red;
}
.bg-container {
  width: 920px;
  margin: 0 auto;
  background-color: blue;
  min-height: 100vh;
}

<div id="body-container">
  <div class="bg-container">foo bar</div>
</div>

Answer 3

作为替代方案，Flexbox

Codepen Demo

html,
body {
  height: 100%;
  background-color: black;
  margin: 0;
}
#body-container {
  width: 920px;
  margin: 0 auto;
  min-height: 100%;
  background-color: red;
  display: flex;
  flex-direction: column;
}
.bg-container {
  background-color: blue;
  flex: 1;
}

<div id="body-container">

  <div class="bg-container">
  </div>

</div>

将最小高度设置为100％作为容器的子级，最小高度为100％

3 个答案: