HTML/CSS：移除高度为 100% 的垂直滚动；答案

【问题标题】：HTML/CSS: Remove vertical scroll with height: 100%;HTML/CSS：移除高度为 100% 的垂直滚动；
【发布时间】：2013-11-21 21:00:42
【问题描述】：

我正在创建两个要填充页面的列。很简单。但是，我得到了一个非常轻微的垂直滚动条。在html 和body 上设置margin: 0 和padding: 0 并没有解决问题。

我已经查看了overflow: hidden，但我不喜欢它。我还考虑在底部放置一个clear:both div，但这并没有做任何事情。我已经研究过使用min-height，但我似乎无法让它正常工作。

我有两个问题：

为什么会出现垂直滚动条？
如何移除垂直滚动条？

现场示例： http://jsfiddle.net/XrYYA/

HTML：

<body>
    <div id="palette">Palette</div>
    <div id="canvas">Content</div>
</body>

CSS：

html, body {
height: 100%;
margin: 0;
padding: 0;
}

#palette {
float: left;
width: 300px;
height: 100%;
border: 1px solid black;
}

#canvas {
margin-left: 300px;
height: 100%;
border: 1px solid blue;
}

【问题讨论】：

标签： html css height

【解决方案1】：

这是因为元素的每一边都有 1px 的边框。

100% + 2px 边框！= 100%。

您可以使用box-sizing 将边框包含在元素的高度中。

jsFiddle example

div {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

或者，您可以使用calc() 减去 2px。

height: calc(100% - 2px);

jsFiddle example

【讨论】：