部分不适用于 CSS 粘滞页脚
Posted
技术标签:
【中文标题】部分不适用于 CSS 粘滞页脚【英文标题】：Section not working with CSS Sticky Footer 【发布时间】：2016-06-21 12:23:16 【问题描述】：我试图让页脚留在页面底部，即使内容太短。我不想要一个固定的页脚。我想要一个粘性页脚。
我有一个部分导致了这些问题。我只希望该部分填充页脚的空间，除非有必要，否则没有滚动条。
http://fabricatorsunlimited.com/test/quartzcare.html
这是我正在处理的页面，因为没有内容。是否可以看到，你必须滚动才能查看滚动条，即使没有内容。
HTML
<head>
</HEAD>
<body class="size-960">
<section>
<!-- HEADER -->
<header>
</header>
<!-- HOME PAGE BLOCK -->
<div class="line">
<div class="margin"></div></div>
<!-- ASIDE NAV AND CONTENT -->
<div class="line">
<div class="box margin-bottom">
<div class="margin">
<!-- CONTENT -->
<article class="s-12 l-8">
<h1>Quartz Care</h1>
<p>....</p>
</div></article></div></div>
</section>
<!-- FOOTER -->
<footer>
</footer>
</body>
</html>
CSS
*
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
html height: 100%;
box-sizing: border-box;
*,*:before,*:after box-sizing: inherit;
body
font-family: "Open Sans";
color: #413D3D;
background: url("bodyback.png");
position: relative;
min-height: 100%;
.box
background: #ffffff;
padding: 1.25em;
margin-top: 20px;
border-top: 1px #0068B3 solid;
background-color:#ffffff;
min-height: 100%;
section
min-height: 100%;
padding-bottom: -85px;
footer
background: #959595;
position: absolute;
right: 0;
bottom: 0;
left: 0;
color: #ffffff;
height: 85px;
【问题讨论】：
查看本教程：cs-s-reset.com/how-to-keep-footer-at-bottom-of-page-with-css 或此代码笔：codepen.io/cbracco/pen/zekgx 你不是在打开 3 个 div，在 '' 之后没有关闭吗？ 【参考方案1】：有两个问题。首先是您的header 和section 占用的空间比您在section 中调整的空间要多。其次，在调整页脚高度时应使用margin-bottom 而不是padding-bottom（不支持负填充）。
所以你需要做的是把标题和主要部分放在一个通用的包装元素中。该包装器元素应该使用以下“技巧”调整页脚高度：
min-height: 100%;
margin-bottom: -85px;
类似这样的：
<html>
<body>
<div class="wrapper">
<header></header>
<section></section>
</div>
<footer></footer>
</body>
</html>
使用这种样式：
*
margin: 0;
html, body
height: 100%;
.wrapper
background: red;
min-height: 100%;
margin-bottom: -85px;
.wrapper:after
content: "";
display: block;
footer
background: blue;
height: 85px;
这是一个显示它的小提琴：https://jsfiddle.net/63fo4tq4/
【讨论】：
这主要是可行的.. 大小都是正确的。现在我只需要白色来填充最后一个文本和页脚之间的空间，而不是其余部分来覆盖蓝色上边框上方的背景。 我实际上不明白您想要什么，但这听起来与您最初描述的问题不同。如果它是一个单独的问题并且这有助于您解决原来的问题，请标记为正确并为您的新问题创建一个新问题。如果不是，你能不能试着解释一下？ fabricatorsunlimited.com/test/quartzcare.html如果现在看页面，内容应该在的白框只要内容填满就行。我想白框一直到页脚，覆盖页面的具体背景。因此，从 1px 蓝色边框开始的所有内容都应该是白色的，直到您点击灰色页脚。 其实我想我只是想通了.. 将背景图像应用于标题而不是正文。【参考方案2】：我不太确定您的 css 导致此问题的原因，我设法检查了您的页面并发现您的 <section> 元素具有属性 height:100%。
我检查了您的 css 并且该属性似乎已被注释，但浏览器仍然会加载它。
尝试在您的 css 中删除该属性。
【讨论】：
以上是关于部分不适用于 CSS 粘滞页脚的主要内容，如果未能解决你的问题，请参考以下文章