pom*_*4ik 24 css sticky footer
我有一个页面只有几行内容.我希望将页脚推到底部.
<div id="footer"></div>
我不想用
#footer
{
position:fixed;
bottom:0;
}
AKA Sticky Footer
没有jQuery这可能吗？
有什么建议？
Vin*_*aes 28
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
Tho*_*ham 10
这是一个解决方案,不要求将页脚放在主包装元素之外,这是大多数人构建页面的方式.
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding-bottom: 1em; /* Height of footer */
min-height: 100%;
}
header {
background-color: #cff;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
background-color: #000;
}<div class="wrapper">
<header>I am the header.</header>
<article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
<footer>I am the footer.</footer>
</div>说明
包装器元素将填充100%的视口高度.(您也可以使用100vh为包装,如果你不希望设置html和body元素的高度.)的包装也有底部填充,以创建页脚坐的占位符.
页脚绝对位于包装器的底部,并位于由包装器底部填充创建的占位符中.
这意味着当页面没有滚动条时,页脚将位于最底部.但是,当滚动条有足够的内容出现时,页脚将在内容下方向下推.
Chi*_*hor 10
这种Flexbox解决方案更加整洁，易于实施：
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
只要确保将必需的文件包装divs在中即可body。
尝试Steve Hatcher的Sticky Footer解决方案
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {
margin: 0;
padding: 0;
}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to the total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
}
/* must be same height as the footer */
#footer {
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear: both;
}
/*Opera Fix*/
body:before {
/* thanks to Maleika (Kohoutec)*/
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/