Question

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

我调查了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 example

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

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

height: calc(100% - 2px);

jsFiddle example

HTML / CSS：删除高度为100％的垂直滚动;

1 个答案: