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

Question

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

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

我有两个问题：

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

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

Answer 1

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

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

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

jsFiddle 示例

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

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

height: calc(100% - 2px);

jsFiddle 示例

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

问题描述

1 个解决方案

解决方案1
6 已采纳 2013-11-09 20:58:58

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

问题描述

1 个解决方案

解决方案1 6 已采纳 2013-11-09 20:58:58

解决方案1
6 已采纳 2013-11-09 20:58:58