Question

即使内容太短，我也试图让页脚停留在页面底部。我不想要一个固定的页脚。我想要一个粘性页脚。

我有一个导致问题的部分。我只是希望该部分将空间填充到页脚，除非有必要，否则没有滚动条。

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;}

Answer 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/

Answer 2

我不太清楚为什么你的css造成这种情况，我设法检查你的页面，并确定你的<section>元素具有属性height:100%。

我检查了你的css并且该属性似乎已被注释，但浏览器仍会加载它。

尝试删除css中的该属性。

不使用CSS Sticky Footer的部分

2 个答案: