100％高度的垂直滚动条？答案

【问题标题】：Vertical scroll bar with 100% height?100％高度的垂直滚动条？
【发布时间】：2014-11-04 16:45:24
【问题描述】：

我在这里遇到了问题。具有 100% 高度的容器内带有标题、导航栏和内容 div 的简单布局，但我仍然得到一个垂直滚动条。

style.css

html, body {
margin: 0px;
padding: 0;
background: #E6E6E6;
}

#container{
width: 900px;
height: 100%;
position: relative;
left: 450px;
}

#header{
width: 900px;
height: 70px;
position: absolute;
background-color: #FFFFFF;
border: 1px solid black;
}

#navBar{
width: 900px;
height:20px;
position: absolute;
top: 77px;
background-color: #FFFFFF;
border: 1px solid black;
}

#content{
width: 900px;
height: 100%;
position: absolute;
top: 104px;
background-color: #FFFFFF;
border: 1px solid black;
}

【问题讨论】：

向我们展示相应的 HTML。
overflow:hidden 在你不想要滚动条的容器中怎么样？
这样做会删除一侧的边框。
有了这个demo fiddle 我看不到垂直滚动 - 只有水平滚动
@Danield 正确，但是您的示例缺少需要应用于 html 和正文的 100%，请参阅确实具有垂直滚动条的 jsfiddle.net/eevzvsdL/1。

标签： html css

【解决方案1】：

根据您对 overflow: hidden 删除边框的评论，试试这个：

overflow-y: hidden;

这只会删除垂直滚动条，就像你问的那样。

【讨论】：

这是一个疯狂的猜测，但我认为他在谈论底部边框。
可以，不过还是值得一试。
是的，因为OP还没有提供HTML结构，所以很难说。

【解决方案2】：

假设#header、#navbar和#content都是container的children，原因就很明显了。 #content 也设置为 100% 高度，另外还有一个 top 值。所以，它是全高，然后向下移动，当然会产生一个垂直滚动条。

一种解决方案是添加

overflow: hidden;

到#container，但这只会削减内容。您需要正确计算高度：

#content { height: calc(100% - 106px); }

请参阅 DEMO。

附加信息：由于 104 的上边距加上 2px 的边框，我减去了 106px。

【讨论】：

使用 content-inner 方法这样做会使我的标题和导航栏消失
这会导致旧浏览器出现问题，因为他们不知道“calc”

【解决方案3】：

#container { 中的 height: 100% 会导致此问题。
如果你想解决这个问题，你必须设置bottom: 0

JSFiddle

html, body {
    margin: 0px;
    padding: 0;
    background: #E6E6E6;
    height: 100%; /* added this to html,body*/
}
#content{
    width: 900px;
    bottom: 0; /* set this instead of height: 100%*/
    position: absolute;
    top: 104px;
    background-color: #FFFFFF;
    border: 1px solid black;
}

【讨论】：