2

フィドル

私は次のHTMLを持っています

<body>
    <div id="container">
        <div id="header">

        </div>
        <div id="content">

        </div>
        <div id="footer">
        </div>
    </div>
</body>

そしてこのCSS

        html{
            width: 100%;
            height: 100%;
        }

        body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        #container{
            margin: 0 auto;
            padding: 25px;
            min-width: 960px;
            min-height: 600px;
            width: 100%;
            height: 100%;
            box-shadow: inset 0 0 20px #000;
            -moz-box-shadow: inset 0 0 20px #000;
            -webkit-box-shadow: inset 0 0 20px #000;
            -khtml-box-shadow: inset 0 0 20px #000;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        #header, #content, #footer{
            width: 90%; 
            margin: 0 auto;
        }

        #header{    
            height: 55%;
            background: #ccc;
        }

        #content{
            height: 40%;
            background: Yellow;
        }

        #footer{
            height: 5%;
            background: Green;
        }

そのため、コンテナに最小高さを設定しています。ページのサイズを変更すると、コンテンツが min-height に達するまで縮小し、その後スクロールバーが表示され、コンテンツが縮小しないことが期待されます。これはまさに IE(10) と Firefox で起こっていることですが、これを Safari/Chrome で実行すると、コンテンツは min-height がないかのように縮小し続けます。これはどちらも Webkit エンジンを使用する Safari/Chrome で発生しているため、Webkit の問題であると思われます。誰でもアイデアはありますか？

更新します。どうやらバージョンの問題のようです。Chrome 23 を使用していましたが、これは 29 で動作します。ただし、Safari では動作しません (Safari Windows 5.1.7)。また、(そうではない) 古いバージョンで動作しなかった理由を知っておくとよいでしょう。回避策はありますか?

4

0 に答える 0