I want to build a navigation menu that stays fixed in height and has scrollable content when needed. The sidebar should always extend to the bottom of the viewport regardless of window size. When there are too many menu items to fit, I need a scrollbar to appear within the sidebar itself. The main content area should remain on the right side while the nav menu stays on the left. I’ve seen this pattern on many popular websites but I’m struggling to implement it correctly. What’s the best approach to achieve this layout behavior? Are there any specific CSS properties or techniques I should focus on?
Flexbox beats fixed positioning every time for this. Set up your main layout with display: flex and height: 100vh. Give your nav flex-shrink: 0 and a fixed width so it won’t shrink. Inside the nav, use flex-direction: column - put your logo at the top, then wrap your menu items in a div with flex: 1 and overflow-y: auto. Your main content gets flex: 1 to grab the leftover space. Works great with viewport changes and you won’t fight z-index issues. Used this on a dashboard last year and it’s been rock solid across browsers.
Hit this same problem six months back rebuilding our admin panel. The breakthrough was realizing viewport height works differently than regular height calculations. Set your nav container to height: 100vh and use overflow-y: auto on the scrollable content inside. Tricky bit: position your header elements so only the menu items scroll, not the whole sidebar. You’ll need position: fixed on the nav wrapper and adjust your main content’s left margin. Watch out for fixed headers at the top - use calc(100vh - [header-height]) instead of straight 100vh. Works great across browsers and screen sizes.
This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.