CODEWITHSUNDEEP
htmlcss
GunnDawg
GunnDawg

Reputation: 1

Vertical scroll bar with 100% height?

I'm having an issue here. Simple layout with header, nav bar, and content divs inside of a container with 100% height, but I'm still getting a vertical scroll bar.

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

Upvotes: 0

Views: 2502

Answers (3)

Xandrios93
Xandrios93

Reputation: 2295

your height: 100% in the #container { causes this problem.
if you want to fix this, you have to set 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;
}

Upvotes: 0

Paul
Paul

Reputation: 9022

Assuming that #header, #navbar and #content are children of container, the reason is quite obvious. #content is also set to 100% height and additionally has a top value. So, it's full height and then shifted down, of course resulting in a vertical scrollbar.

One solution would be to add

overflow: hidden;

to #container, but that would just cut the content. You need to calculate the height correctly:

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

See the DEMO.

Additional information: I substract 106px due to the top margin of 104 plus 2px for the borders.

Upvotes: 0

Goos van den Bekerom
Goos van den Bekerom

Reputation: 1493

according to your comment about overflow: hidden removing a border try this:

overflow-y: hidden;

that only removes the vertical scrollbar, like you asked.

Upvotes: 1

Related Questions