32
有没有什么方法可以使用CSS 而不用知道页脚的大小，然后将页脚粘贴到浏览器屏幕的底部或内容（取决于哪个更长）？未知高度的CSS粘性页脚
现在我正在使用容器中的绝对定位来保存页脚和容器的最小高度为100％的内容，但是如果我更改了页脚，我发现必须更改容器底部的填充以匹配其高度。
A
回答
33
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
摘要：
对于一个头一个网站，内容区域，和页脚：
- 套
html, body {height: 100%;} - 设置你的身体（或包装DIV）到
display: table; width: 100%; height: 100%; 设置页眉，页脚和内容区域
display: table-row;。给你的页眉和页脚height: 1px;，并给你的内容区域height: auto;页眉和页脚将扩展到适合其内容。内容区域将扩大以适应其较大的内容或可用空间。
+0
这样的解决方案正是我当时所需要的解决方案，我已经为它在将来不可避免地需要时添加了书签。谢谢:) – 2012-01-11 05:11:52
+3
我不知道为什么这被接受为答案，当它清楚地表明你需要脚本的高度在如何......>。> – 2013-05-18 22:44:35
-2
看看这个，cssstickyfooter，它在任何浏览器中都能很好地工作。
更新：这是从2010年，可能是不相关的现行标准
+5
我看着这个;如果您事先知道页脚的高度，这是一个很好的解决方案。 – 2010-12-03 16:20:11
19
如果你愿意跳进HTML5的未来，你可以使用Flexbox的 ...
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
我更详细的答案，同问题：How to make a fluid sticky footer（完整示例：http://jsfiddle.net/n5BaR/）
解决了Flexbox的：http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
什么从MDN是Flexbox的：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
0
，因为没有人知道粘页脚答案W/O知道它的高度，用css（crosbrowser溶液） ，我是被迫来计算的话
的jQuery：
if($(document).height() < $(window).height())
{
$('#content').height
(
$(window).height - $('#footer').height()
);
}
HTML structur e：
<div id="content"></div>
<div id="footer"></div>
1
试试这个！
使用Flex！
没有固定的高度，JAVASCRIPT或表
展开时更多的内容，并且在没有它坚持底部
注：与IE 9 &下面
不工作*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
min-height: 100%;
display: flex;
flex-direction: column;
}
.content{
flex: 1;
background: #ddd;
}<body>
<header>
Header
</header>
<div class='content'>
This is the page content
<br>
PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the body css)
</div>
<footer>
Footer
</footer>
</body>
0
我认为最好的方法就是给你的页脚添加一个类。其余的Javascript将完成。
//This Pen is By Mohammad Abdus Salam
//portfolio.codeexposer.com
var footerHeight = $('footer.fixed_footer').height();
if($('footer').hasClass('fixed_footer')){
$("section").last().css({
"margin-bottom": footerHeight + 'px'
});
}@import url('https://fonts.googleapis.com/css?family=Raleway:400,700,800');
body{
margin: 0;
padding: 0;
text-align:center;
font-family: 'Raleway', sans-serif;
line-height: 30px;
}
section{
padding-top: 80px;
padding-bottom: 80px;
border-bottom:1px solid #ddd;
background: #ffffff;
z-index: 9;
}
h1{
font-size: 48px;
font-weight: 800;
text-transform: capitalize;
}
a{
text-decoration: none;
}
.container{
width: 700px;
display: inline-block;
box-sizing:border-box;
padding-left: 30px;
padding-right: 30px;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
}
.footer_top{
border-bottom: 1px solid #777;
padding-bottom: 60px;
}
.logo img{
width: 100%;
height: 100%;
}
.footer_bottom {}
.footer_bottom p{
color:#aaa;
}
.footer_top{
padding-top: 100px;
}
.footer_bottom p a{
color:#158;
}
footer{
width: 100%;
left: 0;
bottom:0px;
z-index: -1;
background: #222222;
}
.fixed_footer{
width: 100%;
position:fixed;
left: 0;
bottom:0;
z-index: -99;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is About</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Service</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Portfolio</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<footer class="fixed_footer">
<div class="container">
<div class="footer_top">
<a class="logo" href="portfolio.codeexposer.com">
<img src="https://lh3.googleusercontent.com/-a700z77yIxk/AAAAAAAAAAI/AAAAAAAAABM/RzvY_qm9KQY/s512-p/photo.jpg" alt="">
</a>
</div>
<div class="footer_bottom">
<p>
All Rights Reserved By <a href="http://portfolio.codeexposer.com">Mohammad Abdus Salam</a>
</p>
</div>
</div>
</footer>相关问题
- 1. 动力高度的CSS页脚粘
- 2. 高度可调的粘性页脚
- 3. 粘性CSS页脚
- 4. Bootstrap 4 - 粘性页脚 - 动态页脚高度
- 5. 粘性页脚混淆了部分的高度
- 6. 粘性页脚，以及没有特定高度的滚动div
- 7. 粘性页脚在100％高度的网站上
- 8. 粘滞页脚CSS
- 9. CSS未知高度的固定标题
- 10. ASP.NET Div布局 - CSS粘性页脚
- 11. CSS粘性页脚不工作
- 12. css粘性页脚没有滚动条
- 13. 粘性页脚不粘
- 14. 全高柱和粘页脚
- 15. CSS动态定位页脚（粘性页脚问题）
- 16. CSS粘滞页脚失败
- 17. ASP.NET中的CSS粘页脚页面
- 18. 100％宽度粘性页脚+标题，但居中3列内容，高度为100％？
- 19. css-only动态高度页脚100％div高度
- 20. CSS高度页面高度的100％？
- 21. Bootstrap粘性页脚有小宽度的问题页面
- 22. 粘性页脚不粘在AngularJS
- 23. CSS：高度属性
- 24. 粘性页脚帮助
- 25. 粘性页脚问题
- 26. 粘性页脚问题（wordpress）
- 27. 粘性页脚帮助！
- 28. HTML粘性页脚问题
- 29. 什么是粘性页脚？
- 30. 粘性页脚问题
这是你想要的吗？ 1.包含页面内容的区域（我将称之为“内容”）。 2.“footer”的内容之后的区域。 3.如果“内容”变长，则页面被推入页面，但如果用户滚动页面则会显示页面。 – DwB 2010-12-03 16:01:40
@dwb：是的，但页脚的底部总是至少位于窗口的底部，我们不一定知道它的高度。 – 2010-12-03 16:19:25