Fatal编程技术网
  • html/
  • Html 固定页脚的CSS

Html 固定页脚的CSS

html css

Html 固定页脚的CSS,html,css,Html,Css,我有一个非常基本的HTML页面。代码如下所示： <body> <header style="min-height: 255px;"> </header> <article style="padding-bottom: 60px; width: 900px; margin: 0 auto;"> Body text goes here. </article> <footer style="positio

我有一个非常基本的HTML页面。代码如下所示：

<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: absolute; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Copyright information
  </footer>
</body>


正文在这里。
版权信息
通常，我的正文相当大。文本足够大，需要滚动条。看起来页脚位于文本顶部，朝向底部。然后，当我向下滚动时，页脚不会保持固定。我做错了什么

谢谢

将页脚的
位置：绝对
更改为
位置：固定

为什么?？这解释了它们之间的区别。我认为在您的情况下，问题在于
绝对
元素附加到主体上，因此它将随主体滚动。

您需要
位置：固定在页脚中：





正文在这里。
版权信息

使用
位置：固定
而不是
位置：绝对
。





为什么?？这就解释了它们之间的区别。我认为在你的例子中，问题是绝对元素附着在身体上，因此它会随着身体滚动。
我写这个答案是因为我认为它可能会对未来的人有所帮助。即使定义了页脚的
高度
和正文的
页边距底部
，我仍面临一个问题。
问题是，如果你有一个响应性很强的网站，其中页脚的高度会根据屏幕大小动态变化，那么你的内容就会重叠。为了解决这个问题，我使用了jQuery-除了
正文
和页脚的
高度
的
页边距底部
之外，所有设置都保持不变


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


这将始终保持页脚在底部，即使页脚高度发生变化，也不会有内容重叠


<footer style="position: fixed;">



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