gpt4 book ai didi

HTML/CSS : Remove vertical scroll with height: 100%;

转载 作者:搜寻专家 更新时间:2023-10-31 23:05:15 25 4
gpt4 key购买 nike

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

我研究过 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;
}

最佳答案

这是因为元素的每一边都有 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 : Remove vertical scroll with height: 100%;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19882987/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com