我有以下页面(deadlink :) http://www.workingstorage.com/Sample.htm,它有一个我无法坐在页面底部的页脚.
我想要页脚
CSS继承并迷惑我; 我似乎无法正确地改变它以在内容上放置最小高度或使页脚移到底部.
Jon*_*ley 325
一个简单的方法是让身体100%您的网页,用min-height的100%了.如果页脚的高度不变,这可以正常工作.
给页脚一个负边距:
footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;
}
vsy*_*ync 112
我开发了一种非常简单的方法来将页脚粘贴在底部,但作为最常用的方法,您需要调整它以适应页脚的高度.
下面的方法通过在其::after上放置一个伪元素来使用"技巧",并将其body设置为具有页脚的精确高度,因此它将占据页脚完全相同的空间,因此当页脚absolute位于其上方时,看起来页脚真的占据了空间并消除了它的绝对定位的负面影响(例如,超越了身体的内容)
html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }
/* Trick */
body{
display:flex;
flex-direction:column;
}
footer{
margin-top:auto;
}
<body>
<header>Header</header>
<article>Content</article>
<footer>Footer</footer>
</body>html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }
/* Trick: */
body {
position: relative;
}
body::after {
content: '';
display: block;
height: 50px; /* Set same as footer's height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}<body>
<header>Header</header>
<article>Content</article>
<footer>Footer</footer>
</body>html,body { height: 100%; margin: 0; }
header {
height: 50px;
background: lightcyan;
}
footer {
height: 50px;
background: PapayaWhip;
}
/**** Trick: ****/
body {
display: table;
width: 100%;
}
footer {
display: table-row;
}<body>
<header>Header</header>
<article>Content</article>
<footer>Footer</footer>
</body>Tam*_*Pap 40
一个非常简单的方法,适用于跨浏览器,这是:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
m.s*_*tos 39
一个非常简单的 flex 解决方案，不假设元素的固定高度或改变位置。
HTML
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
CSS
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
浏览器支持
所有主流浏览器，IE11 及以下版本除外。
确保对适当的前缀使用Autoprefixer。
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
Ras*_*him 35
<div style="min-height:100vh; display:flex; flex-direction:column;
justify-content:space-between;">
<div> <!-- Wrapper (Without footer) -->
<header>
I am a header.
</header>
<article>
I am an article!
</article>
</div> <!-- End: Wrapper (Without footer) -->
<footer>
I am a footer.
</footer>
</div>确保<div>使用以下 CSS 样式将所有内容包装在一个或任何其他块级元素中：min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; 。
确保将除页脚元素之外的所有内容都包装在 a<div>或任何其他块级元素中。
确保您使用<footer>或任何其他块级元素来包裹页脚。
min-height: 100vh确保 body 元素至少拉伸到屏幕的整个高度
flex-direction: column在保留堆叠块元素方面保持正常文档流的行为（假设正文的直接子元素确实都是块元素）。
justify-content:space-between将页脚推到屏幕底部。
查看如何使用 Bootstrap 5 执行相同操作（将页脚保持在底部） -链接
Lia*_*iam 31
从IE7开始,您可以简单地使用
#footer {
position:fixed;
bottom:0;
}
请参阅caniuse获取支持.
N. *_*eux 29
我用它来将我的页脚粘到底部,它对我有用:
HTML
<body>
<div class="allButFooter">
<!-- Your page's content goes here, including header, nav, aside, everything -->
</div>
<footer>
<!-- Footer content -->
</footer>
</body>
这是您必须在HTML中进行的唯一修改,将其添加div到"allButFooter"类中.我用所有页面做了这些,那些那么短,我知道页脚不会粘到底部,而且页面也足够长,以至于我已经知道我必须滚动.我这样做了,所以我可以看到它在页面内容是动态的情况下工作正常.
CSS
.allButFooter {
min-height: calc(100vh - 40px);
}
本"allButFooter"类有一个min-height依赖于视口的高度值(100vh指视口高度的100%)和页脚的高度,我已经知道了40px.
这就是我所做的一切,它对我来说非常有效.我没有在每个浏览器中尝试过它,只有Firefox,Chrome和Edge,结果就像我想要的那样.页脚粘到底部,您不必弄乱z-index,position或任何其他属性.我的文档中每个元素的位置是默认位置,我没有将其更改为绝对或固定或任何东西.
使用响应式设计
这是我想清楚的事情.这个解决方案具有相同的40px高的Footer,当我在使用响应式设计工作时没有像我预期的那样工作Twitter-Bootstrap.我不得不修改我在函数中减去的值:
.allButFooter {
min-height: calc(100vh - 95px);
}
这可能是因为Twitter-Bootstrap它有自己的边距和填充,所以这就是我必须调整该值的原因.
我希望这对你们有用!至少,这是一个简单的尝试解决方案,它不涉及对整个文档进行大的更改.
San*_*eev 15
我使用的简单解决方案适用于IE8 +
在html上给出min-height:100%,这样如果内容少了,那么页面底部会占据完整的视口高度和页脚.当内容增加时,页脚会随着内容向下移动并保持坚持到底.
JS小提琴演奏演示:http://jsfiddle.net/3L3h64qo/2/
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
然而,另一个非常简单的解决方案就是这个:
html, body {
height: 100%;
width: 100%;
margin: 0;
display: table;
}
footer {
background-color: grey;
display: table-row;
height: 0;
}
诀窍是使用display:table整个文档,并display:table-row与height:0页脚.
由于页脚是唯一具有显示效果的正文子table-row,因此它会在页面底部呈现.
需要注意的一件事是移动设备,因为它们以"不寻常"的方式实现了视口的想法:
因此,使用position: fixed;(正如我在其他地方推荐的那样)通常不是可行的方法.当然,这取决于你所追求的确切行为.
我使用过的,在桌面和移动设备上运行良好的是:
<body>
<div id="footer"></div>
</body>
同
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}
#footer {
position: absolute;
bottom: 0;
}
做这个
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>
您还可以阅读所有现代浏览器都支持的flex
更新:我读了关于flex并试了一下.它对我有用.希望它能为你做同样的事情.这是我实现的方式.这里的主要部分不是ID,而是div
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: block;
flex: 1 0 auto;
}
在这里,您可以阅读有关flex的更多信息https://css-tricks.com/snippets/css/a-guide-to-flexbox/
请记住,旧版本的IE不支持它.
这被称为粘性页脚。一个谷歌搜索它来了一个很大的成果。我已经成功使用了CSS Sticky Footer。但是还有更多。
CSS：
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
的HTML：
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
我只是在这里回答类似的问题：
我是Web开发领域的新手，我知道这已经得到了答案，但这是我发现的最简单的解决方法，我认为这有所不同。我想要一些灵活的东西，因为Web应用程序的页脚具有动态高度，因此我最终使用了FlexBox和spacer。
html, body {
height: 100%;
display: flex;
flex-direction: column;
margin: 0px;
}
column在您需要添加标题，英雄或垂直对齐的任何内容的情况下，我假设我们的应用程序有这种行为。
.spacer {
flex: 1;
}
<html>
<body>
<header> Header </header>
Some content...
<div class='spacer'></div>
<footer> Footer </footer>
</body>
</html>
您可以在这里使用它 https://codepen.io/anon/pen/xmGZQL
小智 5
为我工作。
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}