垂直滚动条,高度为100%?

时间:2014-11-04 08:08:47

标签: html css css3

我在这里有问题。标题,导航栏和内容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;
}

3 个答案:

答案 0 :(得分:1)

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

overflow-y: hidden;

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

答案 1 :(得分:0)

假设#header,#navbar和#content是容器的子代,原因很明显。 #content也设置为100%高度,并且还具有最高值。所以,它是全高,然后向下移动,当然导致垂直滚动条。

一种解决方案是添加

overflow: hidden;

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

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

请参阅 DEMO

附加信息:由于104的上边距加上2px的边界,我减去106px。

答案 2 :(得分:0)

height: 100%中的#container {会导致此问题 如果你想解决这个问题,你必须设置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;
}