How can a variable-height sticky footer be defined in pure CSS?

后端未结

关注

 3  1786

情深已故

The key to note here is the height of the footer is not going to be fixed, but will vary with its content.

When I say “sticky footer,” I use it in what I understand

相关标签:

3条回答

太阳男子

2020-11-28 23:11
You can stick the footer to the bottom of the viewport just with:
```
position: fixed;
bottom: 0;
```
However that will make it appear even if there's content.

To prevent this, you will need some JavaScript:
```
(window.onscroll = function() {
    var foot = document.getElementById('footer');
    foot.style.position = "static";
    if( foot.offsetTop < document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.offsetHeight - foot.offsetHeight)
        foot.style.position = "fixed";
})();
```
(The (...)(); wrapper makes the onscroll function get called once when the page loads, since that's needed too)
(The above function is untested, but should work - if it doesn't, let me know and I'll make an actual test page)
0 讨论(0)
发布评论:

提交评论
- 加载中...

臣服心动

2020-11-28 23:13

You can absolutely do this in pure CSS. Clicky the linky.

This concept uses display: table-cell organize your page sections rather than the normal display: block.

HTML

<body class="Frame">
    <header class="Row"><h1>Catchy header</h1></header>
    <section class="Row Expand"><h2>Awesome content</h2></section>
    <footer class="Row"><h3>Sticky footer</h3></footer>
</body>

CSS

.Frame {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
}
.Row {
    display: table-row;
    height: 1px;
}
.Row.Expand {
    height: auto;
}

0 讨论(0)

广开言路

2020-11-28 23:18
All other solutions here are out of date and either use JavaScript, or table hacks.

With the advent of the CSS flex model, solving the variable-height sticky footer problem becomes very, very easy: while mostly known for laying out content in the horizontal direction, Flexbox actually works just as well for vertical layout problems. All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand. They'll automatically take up all the available space in their container.

Note how simple the markup and the CSS are. No table hacks or anything.

The flex model is supported by 96%+ of the browsers in use today.
```
html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#body {
  flex: 1;
  border: 1px solid red;
}

#footer{
  background: lime;
}
```
```
<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">Body</div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...