Ответ 1
Как уже упоминалось ранее SpliFF, проблема заключается в том, что модель окна по умолчанию (W3C) является "контейнером контента", что приводит к тому, что границы вне width и height. Но вы хотите, чтобы они были в пределах 100% ширины и высоты, которые вы указали. Одним из способов является выбор модели box-box, но вы не можете сделать это в IE 6 и 7 без возврата в режим quirks.
Другое решение работает и в IE 7. Просто установите html и body на 100% высоту и overflow на hidden, чтобы избавиться от оконных полос прокрутки. Затем вам нужно вставить абсолютно позиционированную оболочку div, которая получает красную рамку и весь контент, установив все четыре свойства смещения окна выражений CSS (в условном комментарии), чтобы явно установить ширину и высоту обертки для размеров видовых экранов, минус ширина границы.
Чтобы упростить просмотр эффекта, в следующем примере я увеличил ширину рамки до 5 пикселей:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Border around content</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#wrapper {
position: absolute;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 5px solid red;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#wrapper {
width: expression((m=document.documentElement.clientWidth-10)+'px');
height: expression((m=document.documentElement.clientHeight-10)+'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- just a large div to get scrollbars -->
<div style="width: 9999px; height: 9999px; background: #ddd"></div>
</div>
</body>
</html>
P.S.: Я просто видел, что вам не нравится overflow: hidden, hmmm...
Обновление: Мне удалось обойтись с помощью overflow: hidden, создав границу с помощью четырех разделов, которые привязаны к краям окна просмотра (вы не можете просто наложить весь видовой экран на полноэкранный режим, как все элементы ниже его уже не будут доступны). Это нехорошее решение, но по крайней мере обычные полосы прокрутки остаются в исходном положении. Мне не удалось позволить IE 6 имитировать фиксированное позиционирование с использованием выражений CSS (возникли проблемы с правым и нижним div), но он выглядел ужасно, так как эти выражения очень дорогое и рендеринг затянулся медленно.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Border around content</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#border-t, #border-b, #border-l, #border-r {
position: fixed;
background: red;
z-index: 9999;
}
#border-t {
left: 0;
right: 0;
top: 0;
height: 5px;
}
#border-b {
left: 0;
right: 0;
bottom: 0;
height: 5px;
}
#border-l {
left: 0;
top: 0;
bottom: 0;
width: 5px;
}
#border-r {
right: 0;
top: 0;
bottom: 0;
width: 5px;
}
</style>
</head>
<body>
<!-- just a large div to get scrollbars -->
<div style="width: 9999px; height: 9999px; background: #ddd"></div>
<div id="border-t"></div><div id="border-b"></div>
<div id="border-l"></div><div id="border-r"></div>
</body>
</html>