Css 粘性页脚和IE_Css_Html_Footer

Css 粘性页脚和IE

css html

Css 粘性页脚和IE,css,html,footer,Css,Html,Footer,我有一个问题，即当我的包含浮动元素时，我的粘性页脚不会粘到底部，它将位于非浮动内容的末尾我的目标是，如果页面内容没有填满整个页面，那么页脚将位于页面窗口的底部，而当内容溢出单个页面高度时，页脚将位于页面内容的底部这是我的密码：这让我快发疯了我在谷歌上搜索并试验了大量这个模拟测试页面，但让我失望的是，我无法解决它：-( 我知道这和浮动有关，但我无法解决这个问题！提琴特别是哪个版本的IE？IE 11谢谢你的回答Blake你运气好吗？不，对不起..我没有机会测试任何东西（我大部分时间手

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

我的目标是，如果页面内容没有填满整个页面，那么页脚将位于页面窗口的底部，而当内容溢出单个页面高度时，页脚将位于页面内容的底部

这是我的密码：

这让我快发疯了

我在谷歌上搜索并试验了大量这个模拟测试页面，但让我失望的是，我无法解决它：-(

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

提琴

特别是哪个版本的IE？IE 11谢谢你的回答Blake你运气好吗？不，对不起..我没有机会测试任何东西（我大部分时间手边都没有一个好的IE测试环境）。我猜，你应该在

html

和

正文上都加min height:100%；
（因为body是绝对定位元素的直接父元素），但这就是我目前能说的全部。感谢您的输入，我非常感谢：-）将尝试最小高度并再次让您知道谢谢buddyThank您这么快回复我！但这样做的结果是始终将页脚粘贴在窗口底部。如果内容溢出超过一个页面高度，我需要将其粘贴在内容底部，如果内容不能填满整个窗口。但它不能坐在内容上方或上方：-（有什么想法吗？无论页面高度如何，它始终显示。我需要它1.如果内容没有填满整个窗口高度，则显示在页面底部2.如果页面内容超过一个窗口高度，则显示在页面内容的最底部。目前，无论内容高度如何，它都显示在底部Wrap是一个未定义的高度ght虽然在所有页面上都是如此，所以需要将其设置为“高度：自动”，以使其能够根据内容高度调整大小此粘性页脚在chrome和Firefox中工作，而不是在IE中
<!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;
}

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