how to set footer at the bottom when there is no content

后端未结

关注

 3  1640

暖寄归人

相关标签:

3条回答

生来不讨喜

2021-01-29 06:52
```
footer {
  position: fixed;
  bottom: 0;
}
```
just add this in your css.
0 讨论(0)
发布评论:

提交评论
- 加载中...

予麋鹿

2021-01-29 06:54

A) Footer is fixed:

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) Footer is not fixed:

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>

0 讨论(0)

逝去的感伤

2021-01-29 07:05

You have three options from which I would suggest using flex-box.

1. position: fixed

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

2. Flex-box

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

Demo: https://codepen.io/marcobiedermann/pen/XpoarE

3. Table

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

Demo: https://codepen.io/marcobiedermann/pen/jImsc

0 讨论(0)

热议问题