У меня есть следующий 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 + колесо), пока не появится горизонтальная полоса прокрутки, вы увидите, что после прокрутки вправо полностью, верхний делитель не покрывает заголовок полностью с правой стороны окна.
Я надеялся, что width: 100% будет означать «всегда использовать 100% ширину тела», но, похоже, это не так для абсолютных позиционных элементов div.
Протестированные браузеры: Firefox 3.5,Chrome, IE8 (с режимом совместимости и без него).
Есть ли способ получить этот div, покрывающий 100% ширины страницы?