CODEWITHSUNDEEP
htmlcss
navalhawkeye
navalhawkeye

Reputation: 259

Div expands past page height, but no scroll bar

I have a div along the left side of my page for navigation links. Clicking on a header expands a subset of links. I have this div set to 100% of the page height so that the column takes up the entire left side of the page. The problem occurs when all of the sub categories are expanded. The content of the div runs off the bottom of the page, but doesn't add a scroll bar.

I tried setting the height to auto to see if that would fix the problem (ignoring the fact that it doesn't take up the whole left side), but that didn't fix it either.

So, what do I need to do to get a scroll bar when the div expands past the height of the page? Then have the scroll bar go away if it's not needed.

Thank you.

.leftNavigation {
display:block;
position:fixed;
width:200px;
height:100%;
top:140px;
left:0;
background-color:#f0f0f0;

}

<div class="leftNavigation">
    <p class="linkHeader" id="townLinksHeader"><img src="img/image.jpg" width="200" height="40" alt="Sunnyvale, CA" /></p>
    <div class="links" id="townLinks">
        <ul>
            <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
        </ul>
    </div>

There are 4 paragraph/div combinations inside the left navigation div. Only the paragraph is show until it is clicked on. The links div is then show. When each of those is expanded, it runs off the bottom of the page but doesn't add a scroll bar.

Adding overflow:auto didn't change anything.

Upvotes: 8

Views: 21318

Answers (3)

Kshresthasan
Kshresthasan

Reputation: 11

.leftNavigation {
    display:block;
    position:fixed;
    width:200px;
    height:100%;
    top:0;
    bottom:0;
    left:0;
    margin-top: 140px;
    overflow:auto;
    background-color:#f0f0f0;
}

Now it's correct.

Upvotes: 0

BumbleB2na
BumbleB2na

Reputation: 10743

Does the side content div use fixed positioning? Because, that is usually why a scrollbar does not appear. Try setting the overflow:auto css style on that div to add a scrollbar when needed.

Update:

You have top:140px in there and height:100%. This is actually pushing the side div down below the page. If the expandable content is not taking up much space, then it will flow off the bottom of the page and no scrollbar will appear.

Try this:

.leftNavigation {
    display:block;
    position:fixed;
    width:200px;
    height:100%;
    top:0;
    left:0;
    padding-top:140px;
    overflow:auto;
    background-color:#f0f0f0;
}

Upvotes: 5

Catfish
Catfish

Reputation: 19284

When something is 'fixed' positioned, it will not add scroll bars. You can either try positioning it with position: relative, or you can set top: 0. If top:0 still isn't enough, you'll have to set the height to a fixed height that is smaller than your window.

Upvotes: 0

Related Questions