边界约100%的身高和宽度(HTML 4.01严格)

时间:2009-05-20 08:25:31

标签: html css internet-explorer

好的,这让我现在发疯了。

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

body {
  border: 1px solid red;
}

当我的文档处于怪癖模式时,这样可以正常工作。至少在IE中,这是我的主要目标。红色边框显示在我页面的最边缘,显然是因为预定义的CSS bodyhtml设置为填充屏幕。

通过设置HTML 4.01严格DOCTYPE进入标准模式时,bodyhtml会折叠到内容的真实(较小)尺寸,绘制边框直到屏幕中间。所以我定义:

body, html {
  padding: 0px;
  margin: 0px;
  border: 0px none;
  width: 100%;
  height: 100%;
}

body {
  border: 1px solid red;
}

我得到 - 滚动条,滚动一个像素以显示底部/右边框。但是,我希望马上看到这个边框。

是否存在无废话(如“高度:99.9%;”,“溢出:隐藏;”或“切换回怪癖模式”)方法以获得100%的边框,没有不必要的滚动条? IE-only很好,当然,跨浏览器会更好。

7 个答案:

答案 0 :(得分:13)

正如SpliFF已经提到的那样,问题是因为默认(W3C)box model是'内容框',导致边框超出widthheight。但是你希望那些在你指定的100%宽度和高度范围内。一种解决方法是选择边框框模型,但是如果不恢复到怪癖模式,则无法在IE 6和7中执行此操作。

另一种解决方案也适用于IE 7。只需将htmlbody设置为100%高度,将overflow设置为hidden即可删除窗口的滚动条。然后你需要插入一个绝对定位的包装器div,它获得红色边框和所有内容,将所有四个box offset properties设置为0(因此边框粘在视口的边缘)和{{1} } overflow(将滚动条放在包装器div中)。

唯一的缺点是:IE 6不支持同时设置auto left以及right { {1}}。唯一的解决方法是使用CSS expressions(在条件注释中)将包装器的宽度和高度显式设置为视口的大小减去边框的宽度。

为了更容易看到效果,在下面的示例中,我将边框宽度放大到5像素:

top

P.S。:我刚看到你不喜欢bottom,嗯......


更新:我设法通过使用粘贴在视口边缘的四个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; } 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> 来解决问题(您不能只使用a覆盖整个视口全尺寸div,因为它下面的所有元素都不再可访问)。这不是一个好的解决方案,但至少正常的滚动条保持在原始位置。我无法让IE 6使用CSS表达式模拟固定定位(右侧和底部div出现问题),但无论如何它看起来很可怕,因为这些表达式是very expensive并且渲染变得非常慢。

overflow: hidden

答案 1 :(得分:8)

你会爱上这个。

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

答案 2 :(得分:3)

在CSS3为我们提供内部边框和框模型切换之前,您需要两个div。第一个给出100%的高度,第二个给出边框。否则边界在100%高度的外面(即1px + 100%+ 1px)

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

答案 3 :(得分:1)

它也有点难看,但给身体

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

为我工作。

答案 4 :(得分:1)

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

答案 5 :(得分:0)

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

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

答案 6 :(得分:0)

边框超出100%的大小。试试padding: -1pxmargin: -1px