1

次の HTML/CSS (簡略化) があります。

<body>        
<style>
        body
        {
            margin: 0px;
            padding: 0px;
            color: #fff;
            background-color: #090909;
            text-align: center; 
        }

        #content
        {
            width: 500px;
            margin: 0px auto;
            background-color: blue;
        }

        #header
        {
            width: 500px;
            margin: 0px auto;
            background-color: green;
        }

        #over-div {
            background-color: red;
            position: absolute;
            height: 20px;   
            width: 100%;
            margin: 0px; 
            top: 0px;
            left: 0px;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            filter: alpha(opacity=50);
            -khtml-opacity: 0.5;
            -moz-opacity: 0.5;
            opacity: 0.5;
       }
</style>
<div id="over-div">aa</div> 
<div id="header">
        header
</div>
<div id="content">
        content here
</div>
</body>

アイデアは、ページの上部を完全にカバーするために over-div を持つことです (ただし、そこに固定したままにしないでください。そのため、ユーザーがページを下にスクロールしても表示されません)。

水平スクロールバーが表示されるまで極端にズームインすると (Ctrl+ホイール)、完全に右にスクロールした後、over-div がウィンドウの右側までヘッダーを完全にカバーしていないことがわかります。

width:100% が「常に本体の 100% の幅を使用する」ことを意味することを望んでいましたが、絶対位置の div には当てはまらないようです。

テスト済みブラウザ: Firefox 3.5、Chrome、IE8 (互換モードあり/なし)。

その div カバーをページの 100% 幅にする方法はありますか?

4

1 に答える 1

2

はい、これを #over-div スタイリングに追加します。

min-width:500px;

これにより、#over-div が少なくとも #header および #content div と同じ幅になることが保証されます

于 2010-08-06T16:59:40.207 に答える