css

Question

css - force footer on bottom on pages with little content

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

I have a page with only a couple of lines of content. I want the footer to be pushed to the bottom.

<div id="footer"></div>

I don't want to use

#footer
{
    position:fixed;
    bottom:0;
}

AKA Sticky Footer

Is this possible without jQuery?

any suggestions?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

深蓝 · Answer 1 · 2021-10-17T00:58:32+0000

This Flexbox solution is neater and far easier to implement:

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

Just ensure you wrap the necessary divs inside the body.