Question

我的css布局遇到了严重问题。这是我的工作基础：http://jsfiddle.net/UeVm8/1/

<div id="container">
<div id="header">
    <h1>
        Site name
    </h1>
</div>
<div id="content">
    <h2>
        Page heading
    </h2>
    <p>
        Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
    </p>
<p>
        Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
    </p>
</div>
<div id="footer">
    Copyright © Site name, 20XX
</div>

html, body{
margin: 0;
height: 100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding-top:10px;
padding-bottom:10px;
}

#container
{
position:relative;
margin: 0 auto;
width: 600px;
background:#333;
min-height: 100%;
height:auto !important;
overflow: hidden !important;
}

#header
{
background:#ccc;
padding: 20px;
}

#header h1 { margin: 0; }

#content
{
padding: 20px;
padding-bottom:50px;
}

#footer
{
position:absolute;
background:#ccc;
bottom:0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
width:100%;
}

该站点应始终至少100％高度，顶部和底部距离较短。除了内容太大之外，不应该是滚动条。然后它应该适合内容，顶部和底部的距离应该保持不变。

但是当你调整窗口大小时，底部的填充消失了！？！

我已经尝试了不同的设置并找到了Firefox的解决方案：http://jsfiddle.net/UeVm8/7/

但是这个解决方案在Chrome和IE中不起作用。

我对CSS实现中令人讨厌的不一致感到非常恼火。

是否有人知道如何为所有（现代）浏览器解决此问题？

感谢。

PS：它只是桌面的样式表。

Answer 1

我终于找到了答案！ :) 如上所述，我已经找到了适用于Firefox的解决方案，但它无法在Chrome上运行。经过一番调整之后，我还有一个针对Chrome的解决方案，而这个解决方案并不适用于Firefox。我认为问题是Google Chrome中似乎存在错误。但我可以通过仅使用一些特殊的选择器覆盖Chrome的设置来结合这两种解决方案。

CSS解决方案：http://jsfiddle.net/UeVm8/8/

        html, body{
        margin: 0;
        height: 100%;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        padding-top:10px;
        padding-bottom:10px;
        }

        #container
        {
        position:relative;
        margin: 0px auto 20px;
        width: 600px;
        background:#333;
        min-height: 100%;
        height:auto !important;
        overflow: hidden !important;
        }

        @media screen and (-webkit-min-device-pixel-ratio:0) {
            #container{
                margin: 0px auto 0px;
            }

            html, body{
                overflow:auto;
            }
        }

        #header
        {
        background:#ccc;
        padding: 20px;
        }

        #header h1 { margin: 0; }

        #content
        {
        padding: 20px;
        padding-bottom:50px;
        color:grey;
        }

        #footer
        {
        position:absolute;
        background:#ccc;
        bottom:0;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        width:100%;
        }

我在Firefox，Chrome，IE，Opera和Maxton上进行了测试，但它确实有效。然而，CSS是一个疯狂的小鸡。

Css塌陷填充底部

1 个答案: