4

我正在尝试了解 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 个像素，以便我可以有边框并且没有滚动条？

在此先感谢您的任何想法和答案安德烈

4

4 回答 4

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

于 2012-09-09T10:18:04.707 回答
3

这是因为默认的盒子模型是 content-box，它的工作原理是这样的：

来自 w3schools

您设置的高度会更改“内容”部分。因此，如果您将高度设置为 100%，边框设置为 1%，则加起来为 101%。

根据您要执行的操作，可以通过不同的方式解决此问题。

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

我现在无法找到一个好的解决方案（因为依赖 box-sizing 不是那么兼容），但这是一个糟糕的解决方案，使用绝对定位：http: //jsfiddle.net/XhfmR/

于 2012-09-09T10:22:32.293 回答
1

你的问题是边界：

代替

.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来解决这类问题。

于 2012-09-09T10:17:34.130 回答
0 
.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 建议的。

于 2012-09-09T10:19:22.760 回答