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 回答