如何防止内容在页脚下？

Question

我在我的容器div上使用min-height: 200vw和position: relative，我使用position: absolute和bottom: 0在其中有一个页脚。如何防止内容在页脚下方，并使页脚向下推？

＆＃13;

＆＃13;

.container {
  position: relative;
  min-height: 200vh;
  width: 100%;
 }
 
 .content-text {
  font-size: 2em;
 }
 
 footer {
  width: 100%;
  height: 10em;
  position: absolute;
  bottom: 0;
  background: red;
  opacity: .5;
}

＆＃13;

<div class="container">

  <p class="content-text">Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main  </p>

  <footer>
    <p>Footer Content</p>
  </footer>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据您的代码，一种简单的方法是为容器提供与padding-bottom的高度等效的footer。

＆＃13;

＆＃13;

.container {
  position: relative;
  min-height: 200vh;
  width: 100%;
  /* added */
  padding-bottom: 10em;
}

.content-text {
  font-size: 2em;
}

footer {
  width: 100%;
  height: 10em;
  position: absolute;
  bottom: 0;
  background: red;
  opacity: .5;
}

＆＃13;

<div class="container">

  <p class="content-text">Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content...
    Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content...
    Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content...
    Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content...
    Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content...
    Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content...
    Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content... Main content...
    Main content... Main content... Main content... Main content... Main content... Main content... Main </p>

  <footer>
    <p>Footer Content</p>
  </footer>
</div>

＆＃13;

＆＃13;

＆＃13;