html边框怎么设置100%宽度,边框100%身高和宽度(HTML 4.01严格)

正如SpliFF已经提到的，这个问题是因为默认(W3C)box model是“内容的盒子”，导致边界作为width和height之外。但是你希望那些在你指定的100%宽度和高度之内。一种解决方法是选择边框盒模型，但在IE 6和7中无法做到这一点，而不会恢复到怪癖模式。

另一个解决方案也适用于IE 7。只需设置html和body至100%的高度和overflow到hidden摆脱窗口的滚动条。然后，你需要插入一个绝对定位包装的div得到红色边框与所有内容，所有四个box offset properties到0设置(所以边框粘到视口的边缘)和overflow到auto(把滚动条包装DIV中)。

这里只有一个缺点：IE 6不支持同时设置left和right两者top和bottom。唯一的解决方法是使用CSS expressions(在条件注释中)将包装器的宽度和高度显式设置为视口的大小减去边框的宽度。

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

Border around content

* {

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;

}

P.S .:我刚刚看到你不喜欢overflow: hidden，嗯......

更新：我设法避开使用overflow: hidden通过伪造使用四个div的粘在视窗的边缘(你不能只是覆盖了全尺寸的div整个视口的边界，因为它下面的所有元素也不会更多访问)。这不是一个好的解决方案，但至少正常的滚动条仍然保持原来的位置。我更不知道如何让IE 6使用模拟CSS表达式(得到了与右侧和底部的div问题)固定定位，但它看起来可怕反正那些表情very expensive和渲染了繁琐缓慢。

Border around content

* {

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;

}