填满整个底部的页脚

Question

我想在显示宽度大（大于内容）的情况下填充整个自由底空间（白色），那么如何设置css3样式呢？

CSS：

.footer {
  background-color: #FFFFFF;
  line-height: 20px;
  /*border-top: 1px solid #DDDDDD;*/
  overflow: hidden;
}
.footer .copyright {
    font-family:Lato;
  color: #f6f6f6;
  padding: 10px 15px;
  margin: 15px 3px;
  line-height: 20px;
  text-align: center;
  font-size:0.9em;
  font-weight:400;
}
.footer-color-black,
.footer-transparent {
  background-color: #595324;
  color: #DDDDDD;
  text-align:center;
}

https://jsfiddle.net/3re9wbr2/1/

Answer 1

首先，将margin: 0添加到html / body标记将为您提供此

html,
body {
  margin: 0;
}

.footer {
  background-color: #FFFFFF;
  line-height: 20px;
  /*border-top: 1px solid #DDDDDD;*/
  overflow: hidden;
}

.footer .copyright {
  font-family: Lato;
  color: #f6f6f6;
  padding: 10px 15px;
  margin: 15px 3px;
  line-height: 20px;
  text-align: center;
  font-size: 0.9em;
  font-weight: 400;
}

.footer-color-black,
.footer-transparent {
  background-color: #595324;
  color: #DDDDDD;
  text-align: center;
}

<div class="section">
  <div class="container">
    <div class="title-area">
      <div class="gallerygrid">
        <h5>content ldosalodaslodlsoalodslaodasol</h5>
        <h5>content ldosalodaslodlsoalodslaodasol</h5>
      </div>
    </div>

  </div>
</div>

<footer class="footer footer-big footer-color-black" data-color="black">
  <div class="copyright">
    ©
    <script>
      document.write(new Date().getFullYear())
    </script> · Lorem Ipsum · All Copyright reserved
  </div>
</footer>

其次，使用wrapper添加display: flex min-width: 100vh并.footer flex: 1会给你这个

html,
body {
  margin: 0;
}

.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.section {
}

.footer {
  flex: 1;
  background-color: #FFFFFF;
  line-height: 20px;
  /*border-top: 1px solid #DDDDDD;*/
  overflow: hidden;
}
.footer .copyright {
  font-family: Lato;
  color: #f6f6f6;
  padding: 10px 15px;
  margin: 15px 3px;
  line-height: 20px;
  text-align: center;
  font-size: 0.9em;
  font-weight: 400;
}
.footer-color-black,
.footer-transparent {
  background-color: #595324;
  color: #DDDDDD;
  text-align: center;
}

<div class="wrapper">
  <div class="section">
    <div class="container">
      <div class="title-area">
        <div class="gallerygrid">
          <h5>content ldosalodaslodlsoalodslaodasol</h5>
          <h5>content ldosalodaslodlsoalodslaodasol</h5>
        </div>
      </div>
    </div>
  </div>

  <footer class="footer footer-big footer-color-black" data-color="black">
    <div class="copyright">
      ©
      <script>
        document.write(new Date().getFullYear())

      </script> · Lorem Ipsum · All Copyright reserved
    </div>
  </footer>
</div>

Answer 2

听起来你想要一个粘性页脚。

Ryan Fait's method效果很好。