2

パーセンテージでパディングを使用し始めたときに、divをbox-sizing：border-boxに合わせるのに問題があり、ボックスの位置が位置のパーセンテージと一致しません。

コードは次のとおりです。任意のhtmlファイルに貼り付けて表示します。

<!DOCTYPE html>
<html>
<head>
    <title>Testing</title>
    <style type="text/css" media="screen">
        body{
            width:100%;
            height:100%;
            background-color: blue;
            overflow:none;
            padding:0;
            margin:0;
        }
        #box{
            padding-top:50%;
            width:100%;
            height:100%;
            background-color:blue;    
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;        
        }

        #light{
            width:100%;
            background-color:yellow;                    
        }
    </style>
</head>
<body>
    <div id='box'>
        <div id='light'>
            halo world
        </div>
    </div>
</body>
</html>

パディングのパーセンテージを50％に設定している間、黄色のdivは下部近くに配置されます。これはバグですか、それともボーダーボックスの概念を間違って取得しました。これは、幅と高さとともにパディングを追加します。

chromeとfirefoxの両方でテスト済み。

編集

@ClaudeGreceaによる提案身長がなく、ピクセルごとにdivの高さが固定されている、より単純なものを試してみました。しかし、padding-top：50％を配置すると、ボックスはまだはるかに下にスローされます。

<!DOCTYPE html>
<html>
<head>
    <title>Testing</title>
    <style type="text/css" media="screen">
        .box{
            height:1000px;
            padding-top:50%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box; 
            background-color:#C1C1C1;           
        }
    </style>
</head>
<body>
    <div class="box">
        halo world
    </div>
</body>
</html>
4

1 に答える 1

1

画面サイズを占有するのは、体の100％の高さだからだと思います。さらに、div を中央に配置したい場合は、100% でも目的の外観が得られるマージンを使用します。

CSS の「ボックス モデル」は次のように機能します。

幅 + パディング + ボーダー = ボックスの実際の表示/レンダリング幅 高さ + パディング + ボーダー = ボックスの実際の表示/レンダリング高さ

http://css-tricks.com/box-sizing/

于 2012-09-20T06:53:41.413 に答える