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 では機能しませんでした。いくつかいじった後、Firefoxでは機能しなかったChromeの解決策もありました。問題は、Google 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 に答える