我正在创建两个要填充页面的列.非常简单.但是,我得到一个非常轻微的垂直滚动条.设置margin: 0和padding: 0上html,body并没有修复它.
我调查了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;
}
这是因为元素每侧的1px边框.
100%+ 2px边框!= 100%.
您可以使用box-sizing在元素的高度中包含边框.
div {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
或者,您可以使用calc()减去2px.
height: calc(100% - 2px);
| 归档时间： |
|
| 查看次数： |
7661 次 |
| 最近记录： |