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

Question

好吧，这让我疯狂了。

我希望在我的文档周围有一个边框。 它应该很好地围绕整个窗口/视口。 所以我定义：

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很好，当然，跨浏览器会更好。

Answer 1

正如SpliFF已经提到的，问题是因为默认（W3C）盒子模型是'content-box'，这导致边框超出width和height 。 但是你希望那些在你指定的100％宽度和高度范围内。 一种解决方法是选择边框框模型，但是如果不恢复到怪癖模式，则无法在IE 6和7中执行此操作。

另一种解决方案也适用于IE 7。 只需将html和body设置为100％高度并overflow到hidden即可摆脱窗口的滚动条。 然后你需要插入一个绝对定位的包装div，它获取红色边框和所有内容，将所有四个框偏移属性设置为0 （所以边框粘到视口的边缘）并overflow到auto （将滚动条放在包装div）。

这里只有一个缺点：IE 6不支持同时设置left 和 right和两个top 和 bottom 。 唯一的解决方法是使用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>

PS：我刚看到你不喜欢overflow: hidden ，嗯......

更新：我设法绕过使用overflow: hidden通过使用粘贴到视口边缘的四个div来伪装边框overflow: hidden （您不能仅使用全尺寸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>

Answer 2

你会喜欢这个。

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

Answer 3

直到CSS3为我们提供内部边框和盒子模型切换，你需要两个div。 第一个给出100％的高度，第二个给出边框。 否则边界在100％高度的外面（即1px + 100％+ 1px）

BTW。 你应该在“IE only”之前收集一些统计数据。 IE曾经没有市场份额。 10-30％的用户可能在其他浏览器上。

Answer 4

它也有点难看，但给了身体

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

为我工作。

Answer 5

这是一个只使用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>

Answer 6

尝试为html元素设置边框。 body元素只有它需要的高度，但据我记忆，html元素占用整个空间（它也是你应该设置背景的地方）。

我不确定边框的外观，我通常只设置背景。

Answer 7

边界超出100％的大小。 尝试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