3

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

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

我有两个问题：

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

现场示例：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;
}
4

1 回答 1

5

这是因为元素的每一侧都有 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 示例

于 2013-11-09T20:58:58.917 回答