html - 粘性页脚不适用于 float

Question

在这里查看我的代码笔:codepen

我试图让页脚始终位于页面底部，我尝试了 CSS-tricks 站点的粘性页脚代码，但我认为代码中的 float 元素阻止了页脚粘附到底部。对此有什么想法吗？

谢谢!

下面是我的代码:

* {
  box-sizing: border-box;
  font-family: "Times New Roman", serif;
}
body {
  position: relative;
  height: 100%;
}
.main-container {
  min-height: 100%;
  margin-bottom: -3rem;
}
.main-container:after {
  content: "";
  display: block;
}
section {
  width: 100%;
}
.hero-section {
  width: 100%;
  height: 700px;
  background: white url("http://www.placehold.it/1600x700") no-repeat fixed center;
}
.large-text {
  font-size: 5.2rem;
  font-weight: 500;
}
.medium-text {
  font-size: 2.1rem;
  font-weight: 100;
}
.small-text {
  font-size: 1.2rem;
}
.generic-section {
  margin-top: 5rem;
}
.generic-center-text {
  width: 70%;
  margin: 0 auto;
}
.generic-left-image {
  float: left;
  width: 30%;
}
.generic-right-text {
  float: right;
  width: 65%;
  padding: 3%;
  border: 1px solid red;
  margin: 0;
}
.section-center {
  text-align: center;
}
footer {
  border: 1px solid red;
  width: 100%;
}
footer,
main-container:after {
  height: 3rem;
}

<div class="main-container">

  <!--hero banner section-->
  <section class="hero-section">
    <h1 class="large-text">Lorem Ipsum</h1>
    <h2 class="medium-text">12 Nov 1929 – 14 Sep 1982</h2>
  </section>


  <!-- intro section -->
  <section class="generic-section section-center">
    <img src="http://placehold.it/70x70" alt="" />
    <h2>Lorem Ipsum dolor sit amet</h2>
    <p class="generic-center-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue quam in sodales cursus. In id est vel sapien posuere dictum. Nulla ultricies mi quis odio condimentum, nec porta ex varius. Vivamus imperdiet ante at viverra scelerisque.</p>
  </section>


  <!-- details section -->
  <section>
    <img class="generic-left-image" src="http://www.placehold.it/400x500" alt="" />
    <p class="generic-right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque dui eget arcu aliquam, eu eleifend est feugiat. In ac purus a mi suscipit congue et eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
      mus. Proin at aliquam odio. Suspendisse dapibus imperdiet fringilla. Proin pulvinar luctus orci. Sed ut eros condimentum, pretium neque eu, finibus nunc. Vestibulum bibendum condimentum cursus. Nulla id nibh at nisi venenatis egestas vitae sed arcu.
      Maecenas posuere tempor semper. Curabitur eu pulvinar sem, in cursus nisi. Morbi semper, lacus in euismod accumsan, diam felis fermentum urna, quis viverra risus sapien sed nisi. Integer ac convallis nunc, eu gravida metus. Ut et consequat purus.
      Morbi volutpat placerat erat, nec facilisis dolor aliquet quis. Aliquam urna tortor, tempor in justo nec, vehicula vestibulum augue.</p>
  </section>


  <!-- footer section -->
  <footer>Copyright © 2016 Nikar</footer>

</div>

Answer 1

编辑:

因此无需将其作为固定位置即可使用 flexbox。

这是我做的:

.flex-container {
        display: -webkit-flex;
        display: flex;
        width: 100%;
    }

    .flex-item1 {
        width: 25%;
        margin: 10px;
    }

    .flex-item {
        width: 75%;
        margin: 10px;
    }

然后是 HTML:

<div class="flex-container">
    <div class="flex-item1">
        <img src="http://www.placehold.it/400x500" alt="" />
    </div>
    <div class="flex-item">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque dui eget arcu aliquam, eu eleifend est feugiat. In ac purus a mi suscipit congue et eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
            mus. Proin at aliquam odio. Suspendisse dapibus imperdiet fringilla. Proin pulvinar luctus orci. Sed ut eros condimentum, pretium neque eu, finibus nunc. Vestibulum bibendum condimentum cursus. Nulla id nibh at nisi venenatis egestas vitae sed arcu.
            Maecenas posuere tempor semper. Curabitur eu pulvinar sem, in cursus nisi. Morbi semper, lacus in euismod accumsan, diam felis fermentum urna, quis viverra risus sapien sed nisi. Integer ac convallis nunc, eu gravida metus. Ut et consequat purus.
            Morbi volutpat placerat erat, nec facilisis dolor aliquet quis. Aliquam urna tortor, tempor in justo nec, vehicula vestibulum augue.
        </p>
    </div>
</div>

这使页脚保持在页面底部。