好的，这让我现在发疯了。
我希望在我的文档周围有一个边框。它应该很好地围绕整个窗口/视口。所以我定义：
body {
border: 1px solid red;
}
当我的文档处于怪癖模式时，这样可以正常工作。至少在IE中，这是我的主要目标。红色边框显示在我页面的最边缘，显然是因为预定义的CSS body和html设置为填充屏幕。
通过设置HTML 4.01严格DOCTYPE进入标准模式时，body和html会折叠到内容的真实（较小）尺寸，绘制边框直到屏幕中间。所以我定义：
body, html {
padding: 0px;
margin: 0px;
border: 0px none;
width: 100%;
height: 100%;
}
body {
border: 1px solid red;
}
我得到 - 滚动条，滚动一个像素以显示底部/右边框。但是，我希望马上看到这个边框。
是否存在无废话（如“高度：99.9％;”，“溢出：隐藏;”或“切换回怪癖模式”）方法以获得100％的边框，没有不必要的滚动条？ IE-only很好，当然，跨浏览器会更好。
答案 0 :(得分：13)
正如SpliFF已经提到的那样，问题是因为默认（W3C）box model是'内容框'，导致边框超出width和height。但是你希望那些在你指定的100％宽度和高度范围内。一种解决方法是选择边框框模型，但是如果不恢复到怪癖模式，则无法在IE 6和7中执行此操作。
另一种解决方案也适用于IE 7。只需将html和body设置为100％高度，将overflow设置为hidden即可删除窗口的滚动条。然后你需要插入一个绝对定位的包装器div，它获得红色边框和所有内容，将所有四个box offset properties设置为0（因此边框粘在视口的边缘）和{{1} } overflow（将滚动条放在包装器div中）。
唯一的缺点是：IE 6不支持同时设置auto 和 left以及right 和 { {1}}。唯一的解决方法是使用CSS expressions（在条件注释中）将包装器的宽度和高度显式设置为视口的大小减去边框的宽度。
为了更容易看到效果，在下面的示例中，我将边框宽度放大到5像素：
top P.S。：我刚看到你不喜欢bottom，嗯......
更新：我设法通过使用粘贴在视口边缘的四个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;
}
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>
来解决问题（您不能只使用a覆盖整个视口全尺寸div，因为它下面的所有元素都不再可访问）。这不是一个好的解决方案，但至少正常的滚动条保持在原始位置。我无法让IE 6使用CSS表达式模拟固定定位（右侧和底部div出现问题），但无论如何它看起来很可怕，因为这些表达式是very expensive并且渲染变得非常慢。
overflow: hidden答案 1 :(得分：8)
你会爱上这个。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html {
height: 100%;
width: 100%;
display: table;
}
body {
display: table-row;
}
#wrapper {
display: table-cell;
border: 5px solid red;
}
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
http://www.test.dev.arc.net.au/100-percent-border.html
我认为，即使在标准模式下，表格也会保持很多“古怪”的行为，因此它们可能是解决方案。将HTML元素转换为表格非常有趣。
在将此标记为无法在IE6中工作之前，请考虑这是一个非常简单的问题。关键是使用表绘制算法是解决方案，也可以使用纯CSS解决方案：
<table class="outer"><tr><td class="inner"> ...page content...
答案 2 :(得分：3)
在CSS3为我们提供内部边框和框模型切换之前，您需要两个div。第一个给出100％的高度，第二个给出边框。否则边界在100％高度的外面（即1px + 100％+ 1px）
顺便说一句。你应该在“IE only”之前收集一些统计数据。 IE曾经没有市场份额。 10-30％的用户可能在其他浏览器上。
答案 3 :(得分：1)
这是一个只使用html和body元素的简单解决方案（不需要嵌套的div）。它利用了HTML元素的特殊行为（它不能有外边框，因此必须缩小以显示它）。
<html>
<head>
<style>
html {padding:0; margin:0; border:5px solid red;}
body {height:100%; padding:0; margin:0; border:0;}
</style>
</head>
<body>
</body>
</html>
答案 4 :(得分：1)
它也有点难看，但给身体
position:relative;
top:-1px;
left:-1px;
为我工作。
答案 5 :(得分：0)
尝试为html元素设置边框。 body元素只有它需要的高度，但据我记忆，html元素占据了整个空间（它也是你应该设置背景的地方）。
我不确定边框的外观，我通常只设置背景。
答案 6 :(得分：0)
边框超出100％的大小。试试padding: -1px或margin: -1px。