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>

我使用以下样式表：

@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%;
}

这是jsFiddle

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

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

提前感谢任何想法和答案
安德烈

解决方法

以下是使用Box-sizing：border-Box的解决方案.它还消除了对.inner div的需求.

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

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

CSS：如何只有100％的流体布局和边框？

解决方法

相关推荐