Question

这是我的代码：

body,
html {
  height: 100%;
  color: white;
}

.wrapper {
  height: 100%;
}

.wrap-content1 {
  background-image: url(https://source.unsplash.com/random/600x600);
  min-height: 100%;
}

.wrap-content2 {
  min-height: 100px;
  background-color: green;
}

.footer {
  background-color: blue;
  text-align: right;
}

<div class="wrapper">
  <div class="wrap-content1">
    Wrapper Content 1
  </div>
  <div class="wrap-content2">
    Wrapper Content 2
  </div>
</div>

<div class="footer">
  This is a footer
</div>

我想在包装器div的底部显示页脚div，其高度为100％。

我知道这可以通过将页脚div放在包装div中来实现，但它不符合我的要求。

Answer 1

我想您希望wrap-content1为全高，因此请使用vh单位，您将避免所有height:100%因此不会出现溢出问题：

body,
html {
  color: white;
  margin: 0;
}

.wrap-content1 {
  background-image: url(https://source.unsplash.com/random/600x600);
  min-height: 100vh;
}

.wrap-content2 {
  min-height: 100px;
  background-color: green;
}

.footer {
  background-color: blue;
  text-align: right;
}

<div class="wrapper">
  <div class="wrap-content1">
    Wrapper Content 1
  </div>
  <div class="wrap-content2">
    Wrapper Content 2
  </div>
</div>

<div class="footer">
  This is a footer
</div>

Answer 2

我认为你的计算不适合.wrap-content1，它使得页脚不会放在.wrapper的底部。你设置.wrapper的高度= 100％，但.wrap-content1和.wrap-content2超过100％的父级，这使得.wrapper无法包装2个子级。当我设置

.wrap-content1 {
    background-image: url(https://source.unsplash.com/random/600x600);
    min-height: 87%;
}

我可以将页脚放在包装器的底部。

将元素放置在包装器底部，高度为100％

2 个答案: