Question

我知道这个问题已被提出，但我发现的解决方案无效。这是我的代码：

body, html {
    height: 100%;
    background-color: white;
}
body {
    margin: 0;
    padding: 0;
}

问题是出现了一个垂直滚动条......您是否知道如何解决这个问题？

提前谢谢

Answer 1

您可以使用以下css阻止出现在任何元素上的滚动条：

overflow: hidden

Answer 2

有一种'hackish'方式，不使用溢出：隐藏;如果你想知道，但我认为溢出：隐藏本身已经足够好了。查看代码：http://jsfiddle.net/rj3jecc1/

<div class="container">
    <div class="content">Content</div>
    <div class="content">Content</div>
    <div class="content">Content</div>
</div>

body,html{
    height:100%;
    margin:0;
    padding:0;
}
body{
    background:#ddd;
}
.container{
    padding-top:1px;
}
.content{
    background:#fff;
    padding:20px;
    margin:20px;
}

将主体设置为100％高度时的问题是，如果您有一个具有margin-top的直接子容器，它将“推”并超过100％高度，从而导致滚动条出现。这就是为什么我添加了另一个容器，其中包含1px（甚至0.1，只要它的>零）顶部填充以防止这种情况，并且此解决方案适用于最新版本的主要浏览器。

我不知道为什么你需要身高100％，但我会尽量不指定它的高度，除非我知道我的内容太短'以适应高度（这不常见）场景）。

正文和html高度100％会显示滚动条

2 个答案: