1

我的 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：这是一个仅适用于桌面的样式表。

4

1 回答 1

3

我终于找到了答案！:) 如前所述，我已经找到了 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 还是个疯子。

于 2013-07-05T16:11:38.987 回答