当body高度100％时，粘性页脚到底部

我喜欢根据窗口的高度创建我的样式，通常通过创建HTML和身体为100％

来做到这一点

html, body{
   min-height: 100%;
   height: 100%;
}

然后，我可以根据下面的JSFIDDLE中所示的剩余元素的高度来设置剩余元素的高度。问题是，我希望我的页脚坚持下面，这对不会超出窗户高度的页面非常有用，但是如果他们这样做，则页脚将固定在那里。我该如何修复它，以使我仍然使用HTML，身体高度为100％，并且仍然使页脚始终保持底部。*注意：我已经完成了

的包装方式

#wrapper{
  min-height:100%;
}

这不太好，因为孩子们的身高无法正常工作。

http://jsfiddle.net/mmahalwy/m4ajl/

建议？

编辑：以这种方式解决了：http://jsfiddle.net/mmahalwy/7wqqf/

谢谢大家！

这是问题，

您使用的是2个CSS样式标签100％高度的每个命名class = block，如果您刚刚制作了一个高度为100％的主div，其中所有其他div都可以正常工作。

<body>
    <container>
        <div class="block">
             <h1>Content</h1>
        </div>
        <div class="block">
             <h1>Content</h1>
        </div>
    </container>
    <footer>I am a footer</footer>
</body>
html, body {
    min-height: 100%;
    height: 100%;
}
container {
    background: grey;
    display: block;
    height: 100%;
    width: 100%;
}
.block {
    height: auto;
}
footer {
    background-color: blue;
    color: white;
    position: relative;
    bottom: 0px;
    width: 100%;
}

最好的答案可能取决于您需要哪种类型的浏览器兼容性。

IMHO，实现此目的的现代方法是使用CSS3 Flexbox，请参阅CSS-Tricks.com的此有用指南。

代码在此jsfiddle中：http：//jsfiddle.net/m4ajl/24/。

html：

<body>
    <div class="container">
        <div class="block">
            <h1>Content</h1>
        </div>
        <div class="block">
            <h1>Content</h1>
        </div>
    <footer>I am a footer</footer>
    </div>
</body>

CSS：

html, body{
    min-height: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    flex-direction: column;
}
.block{
    display: block;
    height: 100%;
}
footer{
    background-color: blue;
    color: white;
    width: 100%;
    flex: none;
}
.container{
    flex: 1;
    overflow-y: auto;
}

相关内容

最新更新

热门标签：