CSS:如何只有100%的流体布局和边框？

Question

CSS:如何只有100%的流体布局和边框？

我正在尝试理解CSS布局的基础知识,并且在添加边框时页面太高会出现问题.

这是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="KKF_00005.css">
<title>KKF 5: Border coping</title>
</head>
<body>
    <div class="links_aussen">
        <div class="innen">Rechts</div>
    </div>
    <div class="mitte_aussen">
        <div class="innen">Mitte</div>
    </div>
    <div class="rechts_aussen">
        <div class="innen">Links</div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我使用以下样式表:

@CHARSET "ISO-8859-1";

* {
    height: 100%;
    margin: 0;
    padding: 0;
}

html,body {
    background-color: grey;
    width: 100%;
}

.innen {
    border: 1px solid black;
}

.links_aussen {
    float: left;
    background-color: green;
    width: 33%;
    height: 100%;
}

.mitte_aussen {
    float: left;
    background-color: yellow;
    height: 100%;
    width: 34%;
}

.rechts_aussen {
    float: left;
    background-color: red;
    height: 100%;
    width: 33%;
}

Run Code Online (Sandbox Code Playgroud)

这里是jsFiddle

我的问题是这段代码水平给我一个很好的100%布局,但创建了一个高垂直的滚动条.我想没有滚动条,但也看到边框(所以溢出:隐藏;我认为这不会帮助我) - 在Chrome和Firefox中测试过.

那么:我如何告诉我的小浏览器它应该从高处移除2个像素,以便我可以有边框而没有滚动条？

在此先感谢André的任何想法和答案

Answer 1

mqc*_*hen 5

这是您使用的解决方案box-sizing: border-box.它也消除了对.innerdiv 的需要.

http://jsfiddle.net/mqchen/xHFvG/

编辑:如果有人想知道为什么这样做,请低头看Joakim Johansson的帖子.现在,回到这篇文章.该box-sizing属性只是重新定义浏览器如何计算元素的大小.有关它的更多信息,请访问:https://developer.mozilla.org/en-US/docs/CSS/box-sizing

归档时间：	13 年，8 月前
查看次数：	499 次
最近记录：	13 年，8 月前