部分不适用于 CSS 粘性页脚
Section not working with CSS Sticky Footer
我试图让页脚留在页面底部,即使内容太短。我不想要固定的页脚。我想要一个粘性页脚。
我有一个部分导致了问题。我只希望该部分将 space 填充到页脚,并且没有滚动条,除非有必要。
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;}
有两个问题。首先是您的 header
和 section
占用的 space 比您在 section
中调整的要多。其次,当您调整页脚高度时,您应该使用 margin-bottom
而不是 padding-bottom
(不支持负填充)。
所以你需要做的是将 header 和主要部分放在一个公共包装器元素中。该包装元素是应该使用以下 "trick":
调整页脚高度的元素
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;
}
这是一个 fiddle 显示:https://jsfiddle.net/63fo4tq4/
我不太确定为什么你的 css 导致了这个,我设法检查了你的页面并发现你的 <section>
元素有 属性 height:100%
。
我检查了你的 css 并且 属性 似乎被评论了,但浏览器仍然加载它。
尝试删除 css 中的那个 属性。
我试图让页脚留在页面底部,即使内容太短。我不想要固定的页脚。我想要一个粘性页脚。
我有一个部分导致了问题。我只希望该部分将 space 填充到页脚,并且没有滚动条,除非有必要。
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;}
有两个问题。首先是您的 header
和 section
占用的 space 比您在 section
中调整的要多。其次,当您调整页脚高度时,您应该使用 margin-bottom
而不是 padding-bottom
(不支持负填充)。
所以你需要做的是将 header 和主要部分放在一个公共包装器元素中。该包装元素是应该使用以下 "trick":
调整页脚高度的元素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;
}
这是一个 fiddle 显示:https://jsfiddle.net/63fo4tq4/
我不太确定为什么你的 css 导致了这个,我设法检查了你的页面并发现你的 <section>
元素有 属性 height:100%
。
我检查了你的 css 并且 属性 似乎被评论了,但浏览器仍然加载它。
尝试删除 css 中的那个 属性。