java 适应边框_流畅的CSS布局和边框

这会让你相当接近，但不是100％的方式(双关语) . 要给元素100％的高度，它需要知道“100％的什么？” . 所有父元素也必须给出100％的高度，这包括正文 . 或者正如W3C所说：“如果没有明确指定包含块的高度(即，它取决于内容高度)，并且该元素没有绝对定位，则该值计算为'auto' . ”正如你所看到的，我们还需要给身体“位置：绝对;”为了荣誉的高度 . 这个例子还将宽度划分为五个带边框的相等列(以及一些填充和边距只是为了好玩)：

body {

width: 100%;

height: 100%;

margin: 0;

position: absolute;

/* overflow: hidden; */

}

div.section {

float: left;

width: 19.95%;

height: 100%;

}

div.column {

height: 100%;

border: 1px solid blue;

margin: 1em;

padding: 2em;

}

one

two

three

four

five

正如您在测试时所看到的那样，我们对witdh没有任何问题 . 这是因为划分宽度的“部分”没有填充，边距或边框 . 因此，我们设置的宽度将是它们在屏幕上占据的宽度 . 现在，这在实践中并不严格 . 我实际上设置了宽度19.95％而不是预期的20％ . 问题是某些浏览器(IE for one)在累加百分比时会出现舍入错误，并且越多的细分就越大，错误就越大 .

这种方法明显失败的地方是高度 . 与“width：auto;”不同，它会使div占用可用的水平空间，“height：auto;”只会使div与其内容一样高 . 你必须指定“身高：100％;”为了获得div来填充窗口的高度，但是当添加边距，填充和边框时，div的渲染高度变得大于视口，从而产生垂直滚动条 .

在这里，我只能看到两个选择;要么1)接受div不完全填满窗口高度并将其高度设置为80％或2)跳过底部边框并将主体设置为“溢出：隐藏;”，这将剥离窗口的部分突出超出窗口边缘的div .

最后，当然你也可以使用一些简单的脚本来实现你所追求的目标 . 不应该是非常复杂 - 但这是另一个标签的问题......快乐的编码！