邊界約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