I'm in the process of developing an application with a left-hand side menu. The menu currently has the following CSS styling:
.menu .levelHolderClass {
position: absolute;
overflow: hidden;
top: 0;
background: #336ca6;
width: auto;
min-height: 100%;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1em;
zoom: 1;
}
Everything works fine until the screen dynamically resizes to accommodate more content, particularly when loading additional items as the user scrolls down through a table-like structure.
Is there a specific CSS property I can use to make the element resize automatically once the page size increases? Currently, the menu stops at 100% height when more rows are added to the screen.
If there's no CSS solution, how would you handle this using Javascript?
Edit: The images below display the menu (blue bar) before and after scrolling past one full page length.
https://i.sstatic.net/PZQFM.png https://i.sstatic.net/vU8cC.png