身高100%时粘性页脚到底部

时间:2014-03-06 18:24:39

标签: javascript html css

我喜欢根据窗口的高度创建我的样式,通常通过创建html和body来实现高度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/

谢谢大家!

3 个答案:

答案 0 :(得分:1)

问题在于

你正在使用2个100%高度的css样式标签,每个名为class = block,如果你只是制作了一个高度为100%的主div,而其中所有其他div都可以正常工作。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

恕我直言,现代的方法是使用CSS3 flexbox,请参阅useful guide from 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;
}