当您有不同的高度页面时，如何使页脚位于所有屏幕尺寸的底部？

Question

I'm trying to make a sticky footer but for some reason(s) it is playing up. I have few pages with different content height therefor when I set the footer on one of them it ruin the others. How can I make a global style for all pages in order to have a sticky footer to the bottom of the pages and also remove any scrolling if there is not need for it as some of my pages require a scroll to reach the footer while the content is about have height.

As I test my site using a website called screen-fly to enable testing on all screen sizes I need a solution that can guarantee a responsive design on any screen size please.

My Code is available on plunker , however I researched a lot and tried some solutions for styling. Here are two of them

Solution 1 :-

/* **************************************************/
                      /* One solution */
    html, body {
      height:100%;
      min-height:100%;
  }
                      /*  navigation style*/
  .navbar-brand {
    margin: 0 auto;
    color:white;
  }
  .navbar-inverse {
    background: rgb(14, 78, 114);
  }
  .navbar-inverse .navbar-nav>li>a {
    color: #8EE8CD;
  }

  /* Content style*/
  .container.content {
    margin-top: 100px;
  }

                      /*  footer style*/
  .wrapper {
      position:relative;
      min-height:100%;
  }
  footer {
      text-align: center;
      position:absolute;
      bottom:0px;
      width:100%;
      color: white;
     background-color: rgb(14, 78, 114);
  }

Solutoin 2:-

/*   Another solution */

  html, body {height: 100%;}

  #wrap {min-height: 100%;}

  #main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

  #footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

  /*Opera Fix*/
  body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
  }

Here are some likns of the code.

plunker Editor: Plunker Editor

plunker full screen: Plunker Full Screen

My site on screenfly: Screenfly Site

Answer 1

Use CSS calc() function. According to your plunkr example give min-height to .container.content instead to giving min-height to html, body, wrapper .

Look at the updated Plunkr .

---

Logic used to give min-height :

.container.content {
  min-height: calc(100vh - 140px);
}

In the above code:

• vh : Viewport Height ( 100vh gives total screen height)
• 140px : 100px for header + 20px for footer + 20px for top margin of footer.

So we are just subtracting the rest of the div s from total viewport height.

Answer 2

Try overflow: hidden; for body.

Answer 3

This is a common problem many people try to solve. For the longest time it required either a compromise or some hacky CSS. Thankfully with the dawn of Flexbox it is actually rather easy. Check the link below.

https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

This page goes through solving problems like yours with Flexbox and will walk you through it.

Answer 4

Change footer style

position: absolute;

to

position: fixed;

Hope that is what you wanted to achieve :)

Answer 5

For those cases I would use Flexbox . This gives you the ability to completely remove your wrapper div .wrapper

To achieve what you want simply add the following code to your CSS

body {
  display: flex;
  flex-direction: column;
}

and change your CSS of your footer div, in your case footer to this

footer {
  margin-top: auto;
  text-align: center;
  color: white;
  background-color: rgb(14, 78, 114);
}