Border around 100% body height and width (HTML 4.0

2019-01-23 12:16发布

站内问答 / HTML/CSS
1410 7 4

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 body and html are set to fill the screen.

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.

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.

7条回答
小情绪 Triste *
2楼-- · 2019-01-23 12:54

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)

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.

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
3楼-- · 2019-01-23 13:02

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.

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

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.

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: #ffffd"></div>
  </div>
</body>
</html>

P.S.: I just saw you don't like overflow: hidden, hmmm...

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: #ffffd"></div>
  <div id="border-t"></div><div id="border-b"></div>
  <div id="border-l"></div><div id="border-r"></div>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
放我归山
4楼-- · 2019-01-23 13:02

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

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.

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:

<table class="outer"><tr><td class="inner"> ...page content...
查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
5楼-- · 2019-01-23 13:06

border is out of 100% size. Try padding: -1px or margin: -1px.

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
6楼-- · 2019-01-23 13:07

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>
<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>
查看更多
0人赞 添加讨论(0) 举报
一纸荒年 Trace。
7楼-- · 2019-01-23 13:16

It also a bit ugly, but giving the body

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

worked for me.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)