I have a simple 2-column layout with a footer that clears both the right and left div in my markup. My problem is that I can't get the footer to stay at the bottom of the page in all browsers. It works if the content pushes the footer down, but that's not always the case.

Update:

It's not working properly in Firefox. I'm seeing a strip of background color below the footer when there's not enough content on the page to push the footer all the way down to the bottom of the browser window. Unfortunately, this is the default state of the page.

标签： css html footer sticky-footer

24条回答

人间绝色

2楼-- · 2018-12-30 23:39

Set the CSS for the #footer to:

position: absolute;
bottom: 0;

You will then need to add a padding or margin to the bottom of your #sidebar and #content to match the height of #footer or when they overlap, the #footer will cover them.

Also, if I remember correctly, IE6 has a problem with the bottom: 0 CSS. You might have to use a JS solution for IE6 (if you care about IE6 that is).

0人赞添加讨论(0) 举报

梦寄多情

3楼-- · 2018-12-30 23:43

A similar solution to @gcedo but without the need of adding an intermediate content in order to push the footer down. We can simply add margin-top:auto to the footer and it will be pushed to the bottom of the page regardless his height or the height of the content above.

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

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}

<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

0人赞添加讨论(0) 举报

低头抚发

4楼-- · 2018-12-30 23:44

You could use position: absolute following to put the footer at the bottom of the page, but then make sure your 2 columns have the appropriate margin-bottom so that they never get occluded by the footer.

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

0人赞添加讨论(0) 举报

与风俱净

5楼-- · 2018-12-30 23:44

Flexbox solution

Flex layout is preferred for natural header and footer heights. This flex solution is tested in modern browsers and actually works :) in IE11.

See JS Fiddle.

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

0人赞添加讨论(0) 举报

心情的温度

6楼-- · 2018-12-30 23:44

      div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        border: 3px solid #73AD21;
      }

  <body style="height:1500px">

    <h2>position: fixed;</h2>

    <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

    <div class="fixed">
      This div element has position: fixed;
    </div>

  </body>

0人赞添加讨论(0) 举报

浮光初槿花落

7楼-- · 2018-12-30 23:47

Sticky footer with `display: flex`

Solution inspired by Philip Walton's sticky footer.

Explanation

This solution is valid only for:

Chrome ≥ 21.0
Firefox ≥ 20.0
Internet Explorer ≥ 10
Safari ≥ 6.1

It is based on the flex display, leveraging the flex-grow property, which allows an element to grow in either height or width (when the flow-direction is set to either column or row respectively), to occupy the extra space in the container.

We are going to leverage also the vh unit, where 1vh is defined as:

1/100th of the height of the viewport

Therefore a height of 100vh it's a concise way to tell an element to span the full viewport's height.

This is how you would structure your web page:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

In order to have the footer stick to the bottom of the page, you want the space between the body and the footer to grow as much as it takes to push the footer at the bottom of the page.

Therefore our layout becomes:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

Implementation

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

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}

<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

You can play with it at the JSFiddle.

Safari quirks

Be aware that Safari has a flawed implementation of the flex-shrink property, which allows items to shrink more than the minimum height that would be required to display the content. To fix this issue you will have to set the flex-shrink property explicitly to 0 to the .content and the footer in the above example:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

0人赞添加讨论(0) 举报

1 2 3 4 下一页

How do you get the footer to stay at the bottom of

Update:

Flexbox solution

Sticky footer with display: flex

Explanation

Implementation

Safari quirks

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

Sticky footer with `display: flex`