CSS使HTML页面页脚以最小高度留在页面底部，但不与页面重叠

2022-01-30 00:00:00 css footer

我有以下页面(死链接:http://www.workingstorage.com/Sample.htm)有一个页脚，我无法将其放在页面底部.

I have the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer which I can't make sit at the bottom of the page.

我希望页脚

  • 当页面较短且屏幕未填满时，贴在窗口底部，并且
  • 当内容超过一屏时(而不是重叠内容)，停留在文档末尾并正常向下移动.

CSS 是继承的，让我很困惑.我似乎无法正确更改它以在内容上设置最小高度或使页脚移至底部.

The CSS is inherited and befuddles me. I can't seem to change it properly to put a minimum height on the content or make the footer go to the bottom.

推荐答案

一个简单的方法是让你的页面的body 100%，加上一个min-height100%.如果您的页脚高度没有改变，这很好用.

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

给页脚一个负边距:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

相关文章