Question

我遇到一个问题，当我的包含浮动元素时，我的粘性页脚不会粘到底部，它将位于非浮动内容的末尾。

我的目标是如果页面内容没有填满整个页面，则在页面窗口的底部有一个FOOTER;当内容溢出单个页面高度时，我的目标是页面的底部。

这是我的代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="sticky.css"/>
    <title>Sticky Footer Test</title>
</head>

<body>

<nav>
    <div id="wrap">
        <p class="navbargreen">Green Navigation Bar</p>
    </div>
</nav>

<main>
    <div id="wrap">
        <p class="redtext">Lorem ipsum</p>
        <div id="box1">Floater 1</div>
    </div>
</main>

<footer>footer</footer>

</body>

</html>

Here is my CSS:

html {
position: relative;
min-height: 100%;
}

body {
margin: 0 0 100px; /* bottom = footer height */
}

main {
position: relative;
min-height: 100%;
}

#wrap {
margin: 0 auto;
width: 960px;
height: auto;
min-height: 100%;
padding: 0;
background-color: yellow;
}

.navbargreen {
height: 30px;
width: 960px;
background-color: greenyellow;
}

.redtext {
background-color: red;
height: 3000px;
}

#box1 {
float: left;
height: 400px;
width: 300px;
background-color: orange;
}

footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: purple;
}

这让我很生气！

我用谷歌搜索并用这个模型测试页面试验嘉豪但是把我打倒了我无法解决它： - （

我知道这与浮子有关，但我无法解决这个问题！

Answer 1

FIDDLE

http://jsfiddle.net/czgoxafr/27/

* {
  margin: 0;
}
html, body {
  height: 100%;
}

.wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -70px; 
}
.wrap:after {
  content: "";
  display: block;
}
.site-footer, .wrap:after {
  height: 70px; 
}
.site-footer {
  background: orange;
}

粘滞页脚和IE浏览器

1 个答案: