3

画面全体に幅100％の黄色の長方形＃box-overを配置したいと思います。Google Chromeのデフォルトのズームレベル（すべてのブラウザを試したわけではありません）では、300％を超えてズームインしない限り、正常に動作します。そうすると、黄色のボックスが画面の100％でなくなり、水平スクロールバーが表示されます。ボトム。この動作を修正する方法がわからないようです。

JSFIDDLE http://jsfiddle.net/VySGL/1/

スクリーンショット ここに画像の説明を入力してください

ソース 

        <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            background-color: black;
        }

        #box {
            width: 100%;
            position: relative;
        }

        #box #box-over {
            z-index: 1;
            width: 100%;
            height: 50px;
            background-color: yellow;
            position: absolute;
            top:10px;
            opacity:0.8;

        }           

        #box #box-over .box-column {
            width: 900px;
            margin: 0 auto;
            zoom: 1;
            position: relative;
            height: 50px;
        }
        </style>

    </head>
    <body>

        <div id="box">
            <div id="box-over">
                <div class="box-column">
                </div>
            </div>
        </div>

    </body>
</html>
4

2 に答える 2

4

100% 幅を使用する代わりに、次のように CSS で左右を 0 に設定します...

JSFiddleを参照してください

#box #box-over {
    z-index: 1;
    left: 0;
    right: 0;
    height: 50px;
    background-color: yellow;
    position: absolute;
    top:10px;
    opacity:0.8;

}           

#box #box-over .box-column {
    left: 0;
    right: 0;
    margin: 0 auto;
    zoom: 1;
    position: absolute;
    height: 50px;
}

left および right プロパティを使用すると、パディングを追加しても幅が 100% を超えないようにすることができます (この JSFiddleを参照してください)。

たとえば、div にパディングを追加すると、100% プラスパディングになります。JSFiddleを参照してください

于 2013-01-22T23:56:50.243 に答える
1

ズームすると、内側の900pxdiv が外側の div の100%幅からはみ出します。max-width:100%toを与えることができます.box-column:

#box #box-over .box-column {
    [...]
    max-width: 100%;
}

フィドル

これにより、内側の div がコンテナの幅を尊重するようになります。

別の解決策は、 を または に設定#box-overするoverflowことhiddenですscroll。このようにして、内側の div の900px幅はアスペクト比で同等になります。

于 2013-01-22T23:41:10.350 に答える