发表新帖
发表新帖

CSS for Fixed Footer

后端 未结
关注
4 806
日久生厌
日久生厌 2020-12-06 11:39

I have a pretty basic HTML page. The code looks like the following:
相关标签:
4条回答
  • 说谎
    2020-12-06 11:55

    Change position: absolute of the footer to position: fixed.

    http://jsfiddle.net/SUQuX/

    Why? This explains how they differ https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ I think in your case the problem is that the absolute element is attaching to the body, thus it will scroll with the body.

    0 讨论(0)
  • 清歌不尽
    2020-12-06 11:56

    You need position:fixed; in your footer:

    <body>
  <header style="min-height: 255px;">
  </header>

  <article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
    Body text goes here.
  </article>

  <footer style="position: fixed; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Copyright information
  </footer>
</body>
    0 讨论(0)
  • 眼角桃花
    2020-12-06 12:06

    I am writing this answer because I think it may help someone in the future. I am facing a problem even after defining the height of the footer and margin-bottom for the body. The problem is if you have responsive website where the height of the footer dynamically changes based on screen size, you will have content overlapping. To solve that, I have used jQuery - Keep every setting same except for margin-bottom for body and height of footer.

    var footerHeight = $('#main_footer').outerHeight(); // get the footer height excluding margin
    $('#main_footer').css('height', footerHeight + "px");
    $('body').css('margin-bottom', footerHeight + 10 + "px");

    This will always keep the footer at the bottom even when the footer height changes and there wil be no content over lapping.

    0 讨论(0)
  • 不知归路
    2020-12-06 12:09

    Use position: fixed instead of position: absolute.

    <footer style="position: fixed;">

    Why? This explains how they differ https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ I think in your case the problem is that the absolute element is attaching to the body, thus it will scroll with the body.

    0 讨论(0)
 看不清?
提交回复
热议问题