边界约100％的身高和宽度（HTML 4.01严格）

Question

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. 至少在IE中，这是我的主要目标。 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. 红色边框显示在我页面的边缘，显然是因为预定义的CSS body和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. 通过设置HTML 4.01严格DOCTYPE进入标准模式时， body和html折叠到内容的实际（较小）大小，边框将直接绘制在屏幕中间。 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. 但是，我希望这个边界立即可见。

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? 有没有废话（如“高度：99.9％;”，“溢出：隐藏;”或“切换回怪癖模式”）方法获得100％的边框，没有不必要的滚动条？ IE-only is fine, cross-browser would be better, of course. IE-only很好，当然，跨浏览器会更好。

Answer 1

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 . 正如SpliFF已经提到的，问题是因为默认（W3C）盒子模型是'content-box'，这导致边框超出width和height 。 But you want those to be within the 100% width and height you specified. 但是你希望那些在你指定的100％宽度和高度范围内。 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 6和7中执行此操作。

Another solution works in IE 7, too. 另一种解决方案也适用于IE 7。 Just set html and body to 100% height and overflow to hidden to get rid of the window's scrollbars. 只需将html和body设置为100％高度并overflow到hidden即可摆脱窗口的滚动条。 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). 然后你需要插入一个绝对定位的包装div，它获取红色边框和所有内容，将所有四个框偏移属性设置为0 （所以边框粘到视口的边缘）并overflow到auto （将滚动条放在包装div）。

There's only one drawback: IE 6 doesn't support setting both left and right and both top and bottom . 这里只有一个缺点：IE 6不支持同时设置left 和 right和两个top 和 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. 唯一的解决方法是使用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>

PS: I just saw you don't like overflow: hidden , hmmm... PS：我刚看到你不喜欢overflow: hidden ，嗯......

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). 更新：我设法绕过使用overflow: hidden通过使用粘贴到视口边缘的四个div来伪装边框overflow: hidden （您不能仅使用全尺寸div覆盖整个视口，因为它下面的所有元素都不会'无法再访问）。 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. 我无法让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>

Answer 2

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. 在将此标记为无法在IE6中工作之前，请考虑这是一个非常简单的问题。 The point is that using the table drawing algorithm is the solution, and a pure CSS solution is also possible: 关键是使用表绘制算法是解决方案，也可以使用纯CSS解决方案：

<table class="outer"><tr><td class="inner"> ...page content...

Answer 3

Until CSS3 gives us inside borders and box-model switching you need two divs. 直到CSS3为我们提供内部边框和盒子模型切换，你需要两个div。 The first to give the 100% height and the second to provide the border. 第一个给出100％的高度，第二个给出边框。 Otherwise the border goes on the outside of the 100% height (ie, 1px+100%+1px) 否则边界在100％高度的外面（即1px + 100％+ 1px）

BTW. BTW。 You should collect some stats before going "IE only". 你应该在“IE only”之前收集一些统计数据。 IE does not have the marketshare it once did. IE曾经没有市场份额。 Anywhere between 10 - 30% of your users may be on other browsers. 10-30％的用户可能在其他浏览器上。

Answer 4

It also a bit ugly, but giving the body 它也有点难看，但给了身体

position:relative;
top:-1px;
left:-1px;

worked for me. 为我工作。

Answer 5

Here's a simple solution using only the html and body elements (no need for nested divs). 这是一个只使用html和body元素的简单解决方案（不需要嵌套的div）。 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元素的特殊行为（它不能有外边框，因此必须缩小才能显示它）。

<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>

Answer 6

Try setting borders for the html element. 尝试为html元素设置边框。 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). body元素只有它需要的高度，但据我记忆，html元素占用整个空间（它也是你应该设置背景的地方）。

I'm not sure how borders look, I usually only set backgrounds. 我不确定边框的外观，我通常只设置背景。

Answer 7

border is out of 100% size. 边界超出100％的大小。 Try padding: -1px or margin: -1px . 尝试padding: -1px或margin: -1px 。

边界约100％的身高和宽度（HTML 4.01严格）

问题描述

7 个解决方案

解决方案1
13 已采纳 2010-06-29 12:12:29

解决方案2
8 2009-05-21 15:29:43

解决方案3
3 2009-05-20 08:35:17

解决方案4
1 2010-07-29 08:19:21

解决方案5
1 2009-05-20 08:57:17

解决方案6
0 2009-05-20 08:43:06

解决方案7
0 2009-05-20 08:47:35

边界约100％的身高和宽度（HTML 4.01严格）

问题描述

7 个解决方案

解决方案1 13 已采纳 2010-06-29 12:12:29

解决方案2 8 2009-05-21 15:29:43

解决方案3 3 2009-05-20 08:35:17

解决方案4 1 2010-07-29 08:19:21

解决方案5 1 2009-05-20 08:57:17

解决方案6 0 2009-05-20 08:43:06

解决方案7 0 2009-05-20 08:47:35

解决方案1
13 已采纳 2010-06-29 12:12:29

解决方案2
8 2009-05-21 15:29:43

解决方案3
3 2009-05-20 08:35:17

解决方案4
1 2010-07-29 08:19:21

解决方案5
1 2009-05-20 08:57:17

解决方案6
0 2009-05-20 08:43:06

解决方案7
0 2009-05-20 08:47:35