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;

}

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

android button圆角边框,UIButton设置圆角和边框及边框颜色
[box.actionButton.layer setMasksToBounds:YES]; [box.actionButton.layer setCornerRadius:10.0]; //设置矩形 ...
android 设置单边框,Android设置单边圆角边框
在drawable新建一个 buttonstyle.xml的文件,内容如下 android:bottomLeftRadius="10dp" android:bottomRightR ...
html div 边框只显示右侧,div 边框原来有这么多种设置方法
在HTML前端斥地中,有数次会对配置边框. 这里给DIV加一个边框方式教程,实现div边框款式.经由CSS border花样属性实现加边框. 如下是各类给DIV加分歧边框实例与才具教程.html代 ...
java设置界面边框,Java 设置Word页边距、页面大小、页面方向、页面边框
本文将通过Java示例介绍如何设置Word页边距(包括上.下.左.右). 页面大小(可设置Letter/A3/A4/A5/A6/B4/B5/B6/Envelop DL/Half Letter/Lett ...
计算机考试中如何设置表格外边框,Excel表格中怎么为单元格区域设置边框
在Excel表格工作表中,我们可以为选中的单元格区域设置各种类型的边框.Excel表格中为单元格区域设置边框的方法其实很简单,下面由学习啦小编告诉你! Excel表格中为单元格区域设置边框的方法 01 ...
img标签设置display:block，宽度无法100%
img标签设置display:block,宽度无法100% 一些个人总结,第一次发文章,有什么不足的地方,还请各位多提意见现象如下代码,img标签设置了display:block,尺寸宽度无法设定 ...
Visual Studio Code (echarts)数据可视化瀑布图实现及标题的格式设置标题背景颜色以及设置副标题和标题加边框，设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码
设置标题背景颜色以及设置副标题和标题加边框, 设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码 <!DOCTYPE html> <html lang="en&q ...
R语言使用plot函数可视化数据、使用pch参数设置数据点的形状、使用lwd参数和bg参数设置数据点边框宽度、背景颜色（仅限于 21到25）
R语言使用plot函数可视化数据.使用pch参数设置数据点的形状.使用lwd参数和bg参数设置数据点边框宽度.背景颜色(仅限于 21到25) 目录
html设置页面大小始终100%,css width 100% 宽度百分之百设置与不设置
css宽度百分之百设置与不设置 css width可以设置具体固定数值比如10px.500px.980px.1200px等,以达到网页固定宽度显示.css 宽度 width也可以设置百分比值,比如80 ...
vue tinymce富文本设置图片宽度最大100%
vue tinymce富文本设置图片宽度最大100% 一.效果没有加样式前的图片显示加了之后二.实现方法控件配置中添加自定义内容样式 //自定义样式 defaultSetting: {con ...

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

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

最新文章

热门文章