问题描述:

I have responsive web page. My problem is that footer ends up in middle of page when it's rendered on small screen device. When I test on devices, which has less than 1200px width, footer ends up just right after screen position. This is what I get on small screen(less than 1200px width):

And on screen with more than 1200px (this is what I should get on smaller screen devices):

Where:

  • GREEN - page size
  • RED - screen size
  • BLUE - footer

And there goes my code:

<footer>

<p>Footer text</p>

<footer>

.

footer {

position: relative;

bottom: 0;

clear: both;

text-align: center;

background-color: rgba(0, 0, 0, 0.5);

}

EDIT: position: fixed; doesn't solve since I need it at bottom of page, not screen.

网友答案:

footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
}

@media screen and (min-width: 500px) {
   footer {
      position: relative;
   }
}
<footer>
  <p> Footer Text here</p>
</footer>
网友答案:

The problem you are trying to solve is called sticky footer and it shouldn't be addressed with position: fixed. There are other solution that will give you a better results like using Flexbox

The HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

The CSS

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

.Site-content {
  flex: 1;
}

More about it here: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

网友答案:

For unknown reasons there was height was set too 100% to devices less than 1200px. CSS:

@media screen and (max-width: 1200px) {
    #base {
        ....
        height: 100%;
    }
}

Removed only this line and everything works. Had page structure like this:

<body>
  ....
  <div id="base">
    .....
  </div>
</body>
<footer>..</footer>
相关阅读:
Top