如何使页脚固定在页面底部
Posted
技术标签:
【中文标题】如何使页脚固定在页面底部【英文标题】：How to make a footer fixed in the page bottom 【发布时间】：2011-07-08 12:52:02 【问题描述】：在我的 html 中，我有一个分类为“页脚”的 div。我希望它有一个到 #000 的 bg 并占据整个页面宽度，并且在它之后不留空白。
我目前正在使用这个 CSS：
.footer
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.75em 0.75em;
background: #000;
position: relative;
top: 490px;
border-top: 1px solid #000;
但是整个页面宽度没有被这个 css 代码填充。
有什么帮助吗？谢谢！
【问题讨论】：
width:100% 也许？哦，你也可以使用margin:0em;而不是设置四个值。
另一个我忘记的细节：我希望页面的内容是宽度：850px，页脚占据页面宽度的 100%。我该怎么做？
CSS: fixed to bottom and centered的可能重复
【参考方案1】：
我使用粘性页脚：http://ryanfait.com/sticky-footer/
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
*
margin: 0;
html,
body
height: 100%;
.wrapper
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
/* the bottom margin is the negative value of the footer's height */
.footer,
.push
height: 142px;
/* .push must be the same height as .footer */
<div class='wrapper'>
body goes here
<div class='push'></div>
</div>
<div class='footer'>Footer!</div>基本上，包装器是 100% 高度，页脚高度为负边距，确保页脚始终位于底部而不会导致滚动。
这应该可以实现您的目标，即拥有 100% 宽度的页脚和更窄的主体，因为 div 是块级元素，默认情况下它们的宽度是其父级的 100%。请记住，此处的页脚不包含在包装 div 中。
【讨论】：
如果页面内容比页面长，页脚会不会和内容重叠？【参考方案2】：您可以像这样将页脚 div 设为页面的绝对值：
.footer
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 100px;/* or however high you would like */
【讨论】：
这样做的问题是页面的内容会在页脚下方流动。您需要DIV 在页面底部为页脚创建一个间隙，因此它不会重叠。【参考方案3】：
我为网页的每个部分使用了一些 DIV 元素。
<div id="tplBody">
<div id="tplHeader">
...
</div>
<div id="tplContent">
...
</div>
<div id="tplFooter">
...
</div>
</div>
每个部分都是相对定位的。使用包装DIVs，我可以将包装器设置为特定宽度，其中的元素可以是100% 宽度。
我建议您避免使用绝对定位和浮动，因为它们会产生兼容性问题，因此可能无法在所有浏览器上正确显示。
【讨论】：
【参考方案4】：如果您希望页脚固定在页面上：
.footer position:fixed;
但是如果你想让你的页脚固定在页面的末尾：
see that
【讨论】：
【参考方案5】：我很高兴大家提供的支持，这些回复中的每一个都以某种方式帮助了我。我来到了这段代码：
.footer
height: 59px;
margin: 0 auto;
color: #fff;
clear: both;
padding: 2em 2em;
background: #000;
position: relative;
top: 508px;
谢谢！
【讨论】：
永远不要写超出你需要的代码。 '填充：2em 2em;'与“填充：2em;”相同。仅供参考... :)【参考方案6】：当我使用 Bootstrap 菜单和固定页脚（无论浏览器分辨率如何）启动 Web 应用程序时，我遇到了这个问题。
为页脚元素使用以下样式
内嵌样式
在Div中使用类属性的外部样式表
<div class="footer"></div>
style.css
.footer
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
在Div中使用id属性的外部样式表
<div id="divfooter"></div>
style.css
#divfooter
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
【讨论】：
【参考方案7】：您可以在 CSS 中使用这些样式来实现您的目标
.footer
background-color: #000;
min-width: 100%;
height: 100px;
bottom:0;
position: fixed;
如果您使用引导程序，请尝试使用 margin-left: -15px 和 margin-right:-15px 但在大多数情况下，当您拥有自己的类时，这不是必需的。
【讨论】：
【参考方案8】：html:
<div class="footer">
<p>
Some text comes here! © 2015 - 2017
</p>
</div>
css:
.footer
width: 100%;
height: auto;
text-align: center;
background: rgb(59, 67, 79);
position: fixed;
bottom: 0%;
margin-top: 50%;
*
padding: 0;
margin: 0;
【讨论】：
虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。【参考方案9】：我也遇到了同样的问题，用 jquery 解决了。
<body>
<div id="header" style="background-color: green">This is header</div>
<div id="main-body" style="background-color: red">This is body</div>
<div id="footer" style="background-color: grey">This is footer</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
if(($(document).height() - $("body").height()) > 0)
var main_body_height = $(document).height() - $("#footer").height() - $("#header").height()
$('#main-body').css('min-height', main_body_height+'px');
</script>我在这里所做的是基于用户的屏幕大小。 在减去页眉和页脚的高度后，我正在增加主体部分的高度。 如果完整的 html 正文高度小于用户屏幕尺寸，则会增加主体部分高度，并且页脚将自动到达页面底部。
【讨论】：
以上是关于如何使页脚固定在页面底部的主要内容，如果未能解决你的问题，请参考以下文章