使HTML页面页脚以最小高度停留在页面底部但不与页面重叠的CSS [英] CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

问题描述

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

I had the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer that 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.

推荐答案

一种简单的方法是制作页面的正文100%，同时将min-height也设置为100%.如果页脚的高度没有变化，则效果很好.

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.

为页脚设置负的页边距顶部

Give the footer a negative margin-top:

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

这篇关于使HTML页面页脚以最小高度停留在页面底部但不与页面重叠的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！