Question

请在此处查看我的codepen：codepen

我试图将页脚始终保持在页面底部，我尝试了CSS-tricks网站中的粘性页脚代码，但我认为代码中的浮动元素阻止了页脚粘贴至底部。关于这个的任何想法？

韩国社交协会！

以下是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

这会将页脚保留在页面底部。

粘滞的页脚不使用浮动

1 个答案: