Question

我正在尝试理解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个像素，这样我才能有边框而没有滚动条？

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

Answer 1

以下是使用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

Answer 2

这是因为默认的盒子模型是内容框，其工作方式如下：

From w3schools

您设置的高度会更改“内容”部分。因此，如果您将高度设置为100％，并将边框设置为1％，则最多可以达到101％。

这取决于你想要做的事情以不同的方式解决。

例如，您可以设置box-sizing属性：http://www.quirksmode.org/css/box.html以使height属性以不同方式工作。

现在不能为我找到一个好的解决方案（因为依赖于盒子大小不兼容），但是使用绝对定位这是一个糟糕的解决方案：http://jsfiddle.net/XhfmR/

Answer 3

你的问题是边界：

而不是

.innen {
    border: 1px solid black;
}

http://jsfiddle.net/tt13/997zC/

使用

 .innen {
    border-left: 1px solid black;
    border-right: 1px solid black; 
 }

http://jsfiddle.net/tt13/997zC/1/

当你只写border时，它会为div的所有边添加边框。在你的情况下，底部和顶部边框需要额外1px，你得到的结果2px高度更高。这就是你看滚动条的原因。

并始终使用jsfiddle来解决此类问题。

Answer 4

.innen {
    border: 1px solid black;
}

是你的问题。它创建垂直滚动条。要解决此问题，请使用以下代码：

.innen {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

http://jsfiddle.net/yrLtz/

编辑：也许最好的解决方案是box-sizing: border-box，正如@mqchen建议的那样。

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

4 个答案: