HTML/CSS：使用height:100％去除垂直滚动条。

Question

HTML/CSS：使用height:100％去除垂直滚动条。

htmlcssheight

4

我正在创建两列布局，希望填满整个页面。非常简单。但是，我发现页面出现了一个微小的垂直滚动条。在 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;
}

- neuquen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

这是因为元素两侧各有1像素的边框。

100% + 2像素边框 != 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示例