Div extends page height but no scrollbar

Question

I have a div on the left side of my page for navigation links. Clicking on the title expands the subset of links. I have this div set to 100% of the page height, so the column occupies the entire left side of the page. The problem occurs when all subcategories are expanded. The content of the div runs at the bottom of the page, but does not add a scroll bar.

I tried setting the height to auto to see if this fixes the problem (ignoring the fact that it does not occupy the entire left side), but this also cannot be fixed.

So what do I need to do to get the scrollbar when the div expands beyond the height of the page? Then scroll the scroll bar if it is not needed.

Thanks.

.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 paragraphs / div in the left navigation div. Only a paragraph is displayed until clicked. Then the div links are displayed. When each of them expands, it runs at the bottom of the page, but does not add a scroll bar.

Adding overflow: auto hasn't changed anything.

Answer 1

Does third-party div content support fixed positioning? Because, as a rule, why the scroll bar does not appear. Try setting the overflow:auto css style in this div to add a scroll bar if necessary.

Update:

You have top: 140px and height: 100%. This actually pushes the sidebar below the page. If the extensible content does not take up much space, it will exit the bottom of the page and the scroll bar will not be displayed.

Try the following:

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

Answer 2

When something is fixed, it will not add scrollbars. You can try positioning it with position: relative , or you can set top: 0 . If top: 0 is still not enough, you need to set the height to a fixed height that is smaller than your window.

Answer 3

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

Now this is correct.