html - 将元素放在高度为 100% 的包装底部

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>

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

我知道这可以通过将页脚 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>