Member Avatar for peidoca

Hello, this is my first forum post ever so please be gentle.

I have a hidden menu (div) which is revealed once you click a img button. The magic is done with js command like style.display='block'.

Problem: The height of the page(stage) is 700px and the menu is 1000px, so when the menu is revealed, I see it just partially, because the scroll bar doesn't re-adjust for the 1000px.

If you want to see it by yourself you can please try: http://www.paulopretti.com/mobile/menuCliente.php?cl=ACB (Please click on MENU and than CLIENTES)

Any Clue how to fix this issue? Your help would be much appreciated. Thanks.

  • 1 Contributor
  • 1 Reply
  • 213 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by peidoca

Dani AI

Generated

Good find, — switching from a viewport-anchored layout to one that participates in the page layout is the right idea. position:fixed pins an element to the viewport so it does not contribute to the document’s scrollable height; that’s why a 1000px panel only shows its top portion and the page scrollbar stays at 700px. Making the menu part of the page flow (or positioned relative to the document) lets the browser expand the scroll area so the whole panel becomes reachable.

Practical options you can apply immediately:

  • Make the menu a normal block (no positioning) so it naturally pushes content and grows the page.
  • Use position:absolute (or a positioned parent) when you want the menu to sit in the document and scroll with the page.
  • Keep position:fixed only when you want an overlay that stays put; in that case give the overlay its own scrolling with overflow:auto so users can scroll the menu contents.

Example CSS patterns:

/* menu as normal flow */
nav.menu { display: none; }
nav.menu.open { display: block; }

/* menu that expands page (absolute positioned under header) */
nav.menu.absolute {
  position: absolute;
  left: 0;
  right: 0;
  top: 60px; /* adjust for header height */
}

/* overlay that stays fixed but scrolls internally */
nav.menu.overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: auto;
}

Best-practice tips: toggle classes rather than inline styles, update ARIA (aria-expanded/aria-hidden) and manage focus/ESC for accessibility, and check for parent rules like overflow:hidden or a fixed container height (remove those if you want the page height to expand). Test on real mobile devices—some browsers handle fixed positioning differently.

Member Avatar for peidoca

I fixed this changing the hidden div css from position:fixed to position:absolute. This way the scroll grows dinamically. Great stuff, closed case!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.