边框约100％的身高和宽度（HTML 4.01 Strict） [英] Border around 100% body height and width (HTML 4.01 Strict)
问题描述
好的，这让我现在疯了。
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;
}
当我的文档处于怪异模式时，至少在IE中，这是我的主要目标。红色边框显示在我的页面的边缘，显然是因为预定义的CSS body 和 html 设置为
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 body and html are set to fill the screen.
通过设置HTML 4.01严格DOCTYPE，正文和 html 折叠到内容的真实（较小）大小，边框在屏幕中间绘制。所以我定义：
When going to standards mode by setting a HTML 4.01 strict DOCTYPE, body and html collapse to the real (smaller) size of the content, the border is drawn right through the middle of the screen. So I define:
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 pixel to show the bottom/right borders. However, I want that border visible right away.
是否有一个没有漏洞（如height：99.9％;，overflow：hidden;或switch回到怪癖模式）方法，以获得100％的边框，没有不必要的滚动条？
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.
推荐答案
由于SpliFF已经提到，问题是因为默认（W3C）框模型是content-box，这会导致边框位于 width 和 height 之外。但是你希望它们在你指定的100％宽度和高度之内。一种解决方法是选择边框框模型，但是你不能在IE 6和7中这样做而不恢复到怪异模式。
As SpliFF already mentioned, the problem is because the default (W3C) box model is 'content-box', which results in borders being outside of the width and 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.
另一个解决方案在IE 7。只需将 html 和 body 设置为100％height和 overflow 到 hidden 可以摆脱窗口的滚动条。然后，您需要插入一个绝对定位的封装div，获取红色边框和所有内容，设置所有四个框偏移属性到 0 （因此边框粘贴到视口的边缘）和 overflow 到 auto （将滚动条放在wrapper div内）。
Another solution works in IE 7, too. Just set html and body to 100% height and overflow to hidden to 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 properties to 0 (so the border sticks to the edges of the viewport) and overflow to auto (to put the scrollbars inside the wrapper div).
：IE 6不支持同时设置 left 和 right $ c> top 和 bottom 。唯一的解决方法是使用 CSS表达式（在条件注释中），以显式地将包装器的宽度和高度设置为视口的大小，减去边框的宽度。
There's only one drawback: IE 6 doesn't support setting both left and right and both top and bottom. 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.
看到效果，在下面的示例中我将边框宽度放大到5像素：
To make it easier to see the effect, in the following example I enlarged the border width to 5 pixels:
<!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>
PS：我刚看到你不喜欢 overflow：hidden ，hmmm ...
P.S.: I just saw you don't like overflow: hidden, hmmm...
strong>我设法使用 overflow：hidden 通过使用四个divs粘贴到视口的边缘（你不能只是覆盖整个视口使用一个全尺寸的div，因为它下面的所有元素将不再是可访问的）。这不是一个很好的解决方案，但至少正常滚动条保持在其原始位置。我无法设法让IE 6使用CSS表达式模拟固定定位（获得右侧和底部div的问题），但它看起来可怕的，因为这些表达式非常昂贵，渲染变得很乏味。
Update: I managed to get around using overflow: hidden by 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 expensive and rendering got tediously slow.
<!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>
这篇关于边框约100％的身高和宽度（HTML 4.01 Strict）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
