垂直滚动条的高度为100％？

Question

我在这里有一个问题。 标头，导航栏和内容div的简单布局位于高度为100％的容器内，但是我仍然得到了垂直滚动条。

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;
}

Answer 1

根据您对overflow: hidden的评论overflow: hidden删除边框请尝试以下操作：

overflow-y: hidden;

就像您要求的那样，仅删除垂直滚动条。

Answer 2

假设＃header，＃navbar和#content是容器的子代，原因很明显。 #content也设置为100％高度，并具有最高值。 因此，它是完整高度，然后向下移动，当然会导致垂直滚动条。

一种解决方案是添加

overflow: hidden;

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

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

参见演示 。

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

Answer 3

您的height: 100% #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;
}