CSS 如何相对于页面底部定位页脚/元素?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10470241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 03:47:33  来源:igfitidea点击:

How to position a footer/element relative to the bottom of the page?

csssticky-footercss-position

提问by Roland

I'm trying to position my footer in the bottom of the page but with little success.

我试图将页脚放在页面底部,但收效甚微。

I can only paste the link as there is a lot of CSS in there and I'm not sure where is my problem.

我只能粘贴链接,因为那里有很多 CSS,我不确定我的问题出在哪里。

So this is the link: Test; If someone would like to help me out I would appreciate it.

所以这是链接:测试;如果有人愿意帮助我,我将不胜感激。

EDIT: The question is old and the url is not there anymore, but the answer may be considered valid anyway when an individual needs to position a footer (or any other element) to the bottom of the page (so called sticky footer).

编辑:问题是旧的,网址不再存在,但是当个人需要将页脚(或任何其他元素)定位到页面底部(所谓的粘性页脚)时,答案可能被认为是有效的。

回答by Roland

I have actually used thissolution lately. It works very well. And if you have dynamic content inside the footer you can easily make a script which on resize or orientation change changes the height of the footer and the margin on the body.

我最近实际上使用了这个解决方案。它运作良好。如果您在页脚中有动态内容,您可以轻松制作一个脚本,该脚本在调整大小或方向更改时会更改页脚的高度和正文的边距。

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 100px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px; //same height as the margin to the bottom of the body
}

回答by KBN

#footer {
      margin-top: -50px;
}

Remove that from #footer {} definition. Also, since you want it relative, you'll have to increase the height of the div above the footer, till it reaches the end of screen. Otherwise you'll have to use absolute positioning.

从 #footer {} 定义中删除它。此外,由于您希望它是相对的,因此您必须增加页脚上方 div 的高度,直到它到达屏幕的末尾。否则你将不得不使用绝对定位。

Edit : Also remove "position: relative" from #footer

编辑:同时从#footer 中删除“位置:相对”

Edit 2: Posting all the definitions I see on firebug.

编辑 2:发布我在萤火虫上看到的所有定义。

footer {
    background-image: url("http://rolandgroza.com/projects/roland/assets/less/../gfx/background-light.png");
    background-position: center center;
    background-repeat: repeat;
    clear: both;
    height: 50px;
    position: relative;
    width: 100%;
}

footer {
    background-image: url("http://rolandgroza.com/projects/roland/assets/less/../gfx/background-light.png");
    background-position: center center;
    background-repeat: repeat;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
}

footer {
    display: block;
}

And you may delete the 1st set of definitions and the last with "display:block" . If you can find them somewhere.

您可以使用 "display:block" 删除第一组定义和最后一组定义。如果你能在某个地方找到它们。

回答by Danield

Use css tables:

使用 css 表:

FIDDLE1- little content

FIDDLE1- 内容很少

FIDDLE2- little content + large footer

FIDDLE2- 小内容 + 大页脚

FIDDLE3- lots of content

FIDDLE3- 大量内容

Markup

标记

<header class="row">header content</header>
<div class="row">content here</div>
<footer class="row">footer content</footer>

CSS

CSS

html {
    height:100%;
    width:100%;
    }
body {
    height:100%;
    width:100%;
    display:table;
    table-layout:fixed;
    margin:0 auto;
    }
.row {
    display:table-row;
    background:orange
}
div.row {
    height:100%;
    background:pink
}

回答by pansarshrek

Try adding

尝试添加

.footerClass {
     position:absolute;
     bottom:0;
}

to your css file and add the class footerClass to your footer-tag

到您的 css 文件并将类 footerClass 添加到您的页脚标签