粘性页脚不适用于浮点数

debugcn 发表于 Dev

当时的气凝胶

在这里查看我的Codepen：codepen

我试图将页脚始终保持在页面底部，并且尝试了CSS技巧网站上的粘性页脚代码，但我认为代码中的浮动元素阻止页脚停留在底部。有什么想法吗？

Tks！

下面是我的代码：

* {
  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>

选项

编辑：

因此，无需将其固定在某个位置就可以使用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>

这样可使页脚位于页面底部。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。