边框围绕 100% 的主体高度和宽度（HTML 4.01 Strict）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/886809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Border around 100% body height and width (HTML 4.01 Strict)
提问by Tomalak
Okay, this is driving me crazy right now.
好吧，这让我现在发疯了。
I want to have a border around my document. It should be nicely going around the whole window/viewport. So I define:
我想在我的文档周围有一个边框。它应该很好地绕过整个窗口/视口。所以我定义：
body {
border: 1px solid red;
}
When my document is in quirks mode, this works fine. At least in IE, which is my primary target here. A red border shows up at the very edges of my page, obviously because by predefined CSS bodyand htmlare set to fill the screen.
当我的文档处于怪癖模式时，这可以正常工作。至少在 IE 中，这是我在这里的主要目标。一个红色边框出现在我页面的最边缘，显然是因为通过预定义的 CSSbody并html设置为填充屏幕。
When going to standards mode by setting a HTML 4.01 strict DOCTYPE, bodyand htmlcollapse to the real(smaller) size of the content, the border is drawn right through the middle of the screen. So I define:
当通过设置 HTML 4.01 严格 DOCTYPE 进入标准模式body并html折叠到内容的真实（较小）尺寸时，边框将直接穿过屏幕中间。所以我定义：
body, html {
padding: 0px;
margin: 0px;
border: 0px none;
width: 100%;
height: 100%;
}
body {
border: 1px solid red;
}
And I get — scroll bars, scrolling exactly one pixelto show the bottom/right borders. However, I want that border visible right away.
我得到 - 滚动条，只滚动一个像素以显示底部/右侧边框。但是，我希望该边框立即可见。
Is there a no-bullshit (like "height: 99.9%;", "overflow: hidden;" or "switch back to quirks mode") method to get a border at 100%, without unnecessary scroll bars? IE-only is fine, cross-browser would be better, of course.
是否有无废话（例如“高度：99.9％；”，“溢出：隐藏；”或“切换回怪癖模式”）方法来获得100％的边框，而没有不必要的滚动条？IE-only 可以，当然跨浏览器会更好。
采纳答案by Marcel Korpel
As SpliFF already mentioned, the problem is because the default (W3C) box modelis 'content-box', which results in borders being outside of the widthand height. But you want those to be within the 100% width and height you specified. One workaround is to select the border-box box model, but you can't do that in IE 6 and 7 without reverting to quirks mode.
正如 SpliFF 已经提到的，问题是因为默认 (W3C)框模型是“内容框”，这导致边框在width和之外height。但是您希望它们在您指定的 100% 宽度和高度内。一种解决方法是选择边界框框模型，但在 IE 6 和 7 中，如果不恢复到 quirks 模式，就不能这样做。
Another solution works in IE 7, too. Just set htmland bodyto 100% height and overflowto hiddento get rid of the window's scrollbars. Then you need to insert an absolutely positioned wrapper div that gets the red border and all content, setting all four box offset propertiesto 0(so the border sticks to the edges of the viewport) and overflowto auto(to put the scrollbars inside the wrapper div).
另一种解决方案也适用于 IE 7。只需设置html并body以100％的高度，并overflow以hidden摆脱窗口的滚动条。然后，你需要插入一个绝对定位包装的div得到红色边框与所有内容，设置四个框偏移特性，以0（使边框粘到视口的边缘），并overflow以auto（把滚动条包装DIV中） .
There's only one drawback: IE 6 doesn't support setting both leftandrightand both topandbottom. The only workaround for this is to use CSS expressions(within a conditional comment) to explicitly set the width and height of the wrapper to the viewport's sizes, minus the width of the border.
只有一个缺点：IE 6 不支持同时设置leftandright和 both topandbottom。唯一的解决方法是使用CSS 表达式（在条件注释中）将包装器的宽度和高度显式设置为视口的大小，减去边框的宽度。
To make it easier to see the effect, in the following example I enlarged the border width to 5 pixels:
为了更容易看到效果，在下面的例子中，我将边框宽度放大到 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.:I just saw you don't like overflow: hidden, hmmm...
PS：我刚看到你不喜欢overflow: hidden，嗯...
Update:I managed to get around using overflow: hiddenby faking a border using four divs that stick to the edges of the viewport (you can't just overlay the whole viewport with a full-sized div, as all elements below it wouldn't be accessible any more). It's not a nice solution, but at least the normal scrollbars remain in their original position. I couldn't manage to let IE 6 simulate the fixed positioning using CSS expressions (got problems with the right and bottom divs), but it looked horribly anyway as those expressions are very expensiveand rendering got tediously slow.
更新：我设法overflow: hidden通过使用四个贴在视口边缘的 div 伪造边框来绕过使用（你不能只用一个全尺寸的 div 覆盖整个视口，因为它下面的所有元素都无法访问没有更多）。这不是一个好的解决方案，但至少正常的滚动条保持在其原始位置。我无法让 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>
回答by SpliFF
You'll love this one.
你会喜欢这个的。
<!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
http://www.test.dev.arc.net.au/100-percent-border.html
I figured since tables keep a lot of "quirky" behavior even under standards mode they might be the solution. Turning the HTML element into a table is pretty funny though.
我认为即使在标准模式下，表格也会保留很多“古怪”的行为，因此它们可能是解决方案。不过，将 HTML 元素转换为表格非常有趣。
Before marking this down for not working in IE6 consider that's a very trivial issue to fix. The point is that using the table drawing algorithm is the solution, and a pure CSS solution is also possible:
在将其标记为无法在 IE6 中工作之前，请考虑这是一个需要解决的非常微不足道的问题。重点是使用表格绘制算法是解决方案，纯CSS解决方案也是可以的：
<table class="outer"><tr><td class="inner"> ...page content...
回答by SpliFF
Until CSS3 gives us inside borders and box-model switching you need two divs. The first to give the 100% height and the second to provide the border. Otherwise the border goes on the outside of the 100% height (ie, 1px+100%+1px)
在 CSS3 为我们提供内部边框和框模型切换之前，您需要两个 div。第一个提供 100% 的高度，第二个提供边框。否则边框位于 100% 高度的外侧（即 1px+100%+1px）
BTW. You should collect some stats before going "IE only". IE does not have the marketshare it once did. Anywhere between 10 - 30% of your users may be on other browsers.
顺便提一句。在进入“仅限 IE”之前，您应该收集一些统计信息。IE 没有它曾经拥有的市场份额。10 - 30% 的用户可能使用其他浏览器。
回答by SpliFF
Here's a simple solution using only the html and body elements (no need for nested divs). It takes advantage of the special behaviour of the HTML element (it can't have an outer border so it must shrink to display it).
这是一个仅使用 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>
回答by acme
It also a bit ugly, but giving the body
它也有点丑，但给身体
position:relative;
top:-1px;
left:-1px;
worked for me.
为我工作。
回答by Xr.
Try setting borders for the html element. The body element is only as high as it needs to but, as far as I remember, the html element takes the whole space (it's where you should set your background, too).
尝试为 html 元素设置边框。body 元素的高度只有它需要的高度，但据我所知，html 元素占据了整个空间（您也应该在这里设置背景）。
I'm not sure how borders look, I usually only set backgrounds.
我不确定边框的外观，我通常只设置背景。
回答by Sergei Kovalenko
border is out of 100% size. Try padding: -1pxor margin: -1px.
边框超出 100% 大小。尝试padding: -1px或margin: -1px。
