如何在css中将页脚粘贴到底部？
Posted
技术标签:
【中文标题】如何在css中将页脚粘贴到底部？【英文标题】：How to stick a footer to bottom in css? 【发布时间】：2010-12-02 02:14:49 【问题描述】：我遇到了在浏览器底部定位页脚的经典问题。我尝试过包括http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ 在内的方法，但效果不佳：我的页脚总是出现在FF 和IE 的浏览器窗口中间。
在 html 中我得到了这个简单的结构
<form>
...
<div class=Main />
<div id=Footer />
</form>
这是与 css 页脚问题相关的 css 代码：
*
margin: 0;
html, body
height: 100%;
#Footer
background-color: #004669;
font-family: Tahoma, Arial;
font-size: 0.7em;
color: White;
position: relative;
height: 4em;
.Main
position:relative;
min-height:100%;
height:auto !important;
height:100%;
/*top: 50px;*/
margin: 0 25% -4em 25%;
font-family: Verdana, Arial, Tahoma, Times New Roman;
font-size: 0.8em;
word-spacing: 1px;
line-height: 170%;
/*padding-bottom: 40px;*/
我哪里做错了？我真的什么都试过了。 如果我错过了任何有用的信息，请告诉我。
提前感谢您的任何建议。
问候，
谢谢大家的回答。 它适用于：
position:absolute;
width:100%;
bottom:0px;
设置位置：由于某种原因在 IE 中无法使用固定（仍然在浏览器中间显示页脚），仅适用于 FF。
【问题讨论】：
一模一样的***.com/questions/42294/… ***.com/search?q=css+footer 2019年很容易做到withflexbox
【参考方案1】：
尝试使用position 属性和fixed 值将您的分区置于固定位置。
以下是将页脚放在页面底部的代码。
footer
position: fixed;
bottom: 0;
【讨论】：
【参考方案2】：以下代码有效，来自 w3schools.com
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
</style>
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
【讨论】：
【参考方案3】：所以@nvdo 和@Abdelhameed Mahmoud 的混合解决方案对我有用
footer
position: sticky;
height: 100px;
top: calc( 100vh - 100px );
【讨论】：
【参考方案4】：我同意 Luke Vo 的解决方案。我认为最好从 layout-wrapper 中省略 justify-content: space-between; 并将 margin-top: auto; 添加到页脚。
你不希望你的身体悬在中间，只将页脚推到底部。
这种方法处理超出视口的任何内容。
【讨论】：
我认为这应该是一条评论，因为它似乎不是独立的答案。【参考方案5】：假设您知道页脚的大小，您可以这样做：
footer
position: sticky;
height: 100px;
top: calc( 100vh - 100px );
【讨论】：
替换 'fixed' 为我工作，footer position: fixed;高度：100px；顶部：计算（100vh - 100px）； 使用 css 原生变量，例如。 --页脚高度：100px；使代码易于使用:)【参考方案6】：对于现代浏览器，您可以使用flex 布局，以确保无论内容长度如何，页脚都位于底部（如果底部太长，则不会隐藏内容）
HTML 布局：
<div class="layout-wrapper">
<header>My header</header>
<section class="page-content">My Main page content</section>
<footer>My footer</footer>
</div>
CSS：
html, body
min-height: 100vh;
width: 100%;
padding: 0;
margin: 0;
.layout-wrapper
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
.layout-wrapper > .page-content
background: cornflowerblue;
color: white;
padding: 20px;
.layout-wrapper > header, .layout-wrapper > footer
background: #C0C0C0;
padding: 20px 0;
演示：https://codepen.io/datvm/pen/vPWXOQ
【讨论】：
你写了正确的解决方案，你可以更新它as here explained【参考方案7】：尝试将页脚的样式设置为position:absolute; 和bottom:0;。
【讨论】：
因为您所做的不是经典的粘页脚，它会粘在页面底部，并且如果页面在窗口底部 100% 可见。 没错，即使页面比折叠长，页脚也会开始覆盖部分内容，并且使用此方法始终保持可见 这是同一解决方案的一种扩展版本：***.com/a/20114486/618649 但在平板电脑或 10 英寸笔记本电脑上，它甚至与折叠内容上方重叠。 我要补充一点，如果页脚嵌套在***组件中，那么这个***组件应该在相应的 css 文件中具有“位置：相对”属性，例如：.top 位置：相对； .footer位置：绝对；底部：0px;【参考方案8】：#footer
position: fixed;
bottom: 0;
http://codepen.io/smarty_tech/pen/grzMZr
【讨论】：
【参考方案9】：下面的css属性就可以了
position: fixed;
希望对你有所帮助。
【讨论】：
【参考方案10】：这对我有用：
.footer
width: 100%;
bottom: 0;
clear: both;
【讨论】：
【参考方案11】：我认为很多人都在寻找底部滚动而不是固定的页脚，称为粘性页脚。当高度太短时，固定页脚将覆盖正文内容。您必须将 html、正文和页面容器设置为 100% 的高度，将页脚设置为绝对位置底部。您的页面内容容器需要一个相对位置才能正常工作。页脚的负边距等于页脚高度减去页面内容的底部边距。请参阅我发布的示例页面。
附注示例：http://markbokil.com/code/bottomfooter/
【讨论】：
【参考方案12】：如果使用“位置：固定；底部：0；”您的页脚将始终显示在底部，如果页面长于浏览器窗口，您的内容将隐藏。
【讨论】：
这确实工作得很好，而且比其他解决方案麻烦得多（尤其是如果你有一个可变高度的页脚），但明显的缺点是它使用 JS。【参考方案13】：#Footer
position:fixed;
bottom:0;
width:100%;
为我工作
【讨论】：
【参考方案14】：我在这个粘性页脚教程中遇到了类似的问题。如果没记错的话，您需要将表单标签放在 div class=Main /> 部分，因为表单标签本身会导致阵容出现问题。
【讨论】：
您能否详细说明您的解决方案可能是正确的，但我没有完全理解：将表单标签准确地放在哪里？ :: 看答案:: 看那个，它过滤掉了标签。更新了答案。这有意义吗？ Andrei 正在谈论粘性页脚，您正在实施的不是粘性页脚。【参考方案15】：#Footer
position:fixed;
bottom:0;
无论您滚动到哪里，页脚都会停留在浏览器窗口的底部。
【讨论】：
这正是我想要的 ;)以上是关于如何在css中将页脚粘贴到底部？的主要内容，如果未能解决你的问题，请参考以下文章