如果没有内容{44}，如何在底部设置页脚

Question

＆＃13;

＆＃13;

<footer>
  <div class="container">
  <div class="row container">
    <div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
      <p>Designed by <a href="http://wiredelta.com/" target="_blank">Wiredelta</a> </p>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
      <div class="pull-right barMain">
        <ul class="social-bar">
          <li>
            <a href="https://www.facebook.com/" target="_blank">
              <span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
            </a>
          </li>
          <li>
            <a href="https://twitter.com/" target="_blank">
              <span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
            </a>
          </li>
          <li>
            <a href="https://plus.google.com/" target="_blank">
              <span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
            </a>
          </li>
          <li>
            <a href="https://www.instagram.com/" target="_blank">
              <span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;

当身体中没有内容时，

页面底部没有页脚。所以我只需要在底部修复页脚，当我运行代码时，code.plzz会给出建议如何修复页脚完全是底部。

Answer 1

A）页脚已修复：

footer {
    background-color: skyblue;
    position:fixed;
    bottom: 0;
    width: 100%;
}

footer {
	background-color: skyblue;
	position:fixed;
	bottom: 0;
	width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<footer>
  <div class="container">
  <div class="row container">
    <div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
      <p>Designed by <a href="http://wiredelta.com/" target="_blank">Wiredelta</a> </p>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
      <div class="pull-right barMain">
        <ul class="social-bar">
          <li>
            <a href="https://www.facebook.com/" target="_blank">
              <span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
            </a>
          </li>
          <li>
            <a href="https://twitter.com/" target="_blank">
              <span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
            </a>
          </li>
          <li>
            <a href="https://plus.google.com/" target="_blank">
              <span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
            </a>
          </li>
          <li>
            <a href="https://www.instagram.com/" target="_blank">
              <span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  </div>
</footer>

B）页脚未修复：

body {
    height: 1200px;
    position: relative;
}

footer {
    background-color: skyblue;
    position:absolute;
    bottom: 0;
    width: 100%;
}

body {
  height: 1200px;
  position: relative;
}

footer {
  background-color: skyblue;
  position:absolute;
  bottom: 0;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<footer>
  <div class="container">
  <div class="row container">
    <div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
      <p>Designed by <a href="http://wiredelta.com/" target="_blank">Wiredelta</a> </p>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
      <div class="pull-right barMain">
        <ul class="social-bar">
          <li>
            <a href="https://www.facebook.com/" target="_blank">
              <span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
            </a>
          </li>
          <li>
            <a href="https://twitter.com/" target="_blank">
              <span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
            </a>
          </li>
          <li>
            <a href="https://plus.google.com/" target="_blank">
              <span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
            </a>
          </li>
          <li>
            <a href="https://www.instagram.com/" target="_blank">
              <span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  </div>
</footer>

Answer 2

footer {
  position: fixed;
  bottom: 0;
}

只需在你的CSS中添加它。

Answer 3

我建议您使用flex-box三个选项。

1。位置：固定

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
}

2。柔性盒

HTML

<html>
    <body>
        <main></main>
        <footer></footer>
    </body>
</html>

CSS

html {
    height: 100%;
}

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

main {
    flex-grow: 1;
}

演示：https://codepen.io/marcobiedermann/pen/XpoarE

3。表

HTML

<html>
    <body>
        <main></main>
        <footer></footer>
    </body>
</html>

CSS

html {
    height: 100%;
}

body {
    display: table;
    min-height: 100vh;
}

main: {
    height: 100%;
}

footer {
    display: table-row;
    height: 1px;
}

演示：https://codepen.io/marcobiedermann/pen/jImsc