Member Avatar for Altairzq

Hello, I have this simple layout:

As you can see the vertical div ("col"), wich is set at height 100%, is longer than the viewport, making the scroll bar to appear.

This does not happen if the horizontal div ("menu") does not exist (it adds the "menu" height to the viewport height, I guess).

Is there a way to have the vertical div to expand to the bottom of the viewport only? So there is no vertical scroll?

  • 3 Contributors
  • 3 Replies
  • 244 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by socr18

Dani AI

Generated

As described, the 100% height on the vertical column ends up taller than the viewport once the horizontal menu is present. is right that a containing element matters, but percentage heights only work when every ancestor has an explicit height. That explains why making a wrapper 100% still produced overflow. Likewise, ’s attempt shows the same trap: forcing 100% on the column without subtracting the header causes the page to grow.

A concise, modern approach is to use flexbox so the header and the main area are siblings and the main area fills the remaining viewport. The left column then becomes a child of that main area and can scroll internally:

html, body { height: 100%; margin: 0; }
.page { min-height: 100vh; display: flex; flex-direction: column; }
.header { /* header/menu here */ }
.main { display: flex; flex: 1; }
.col { width: 280px; overflow: auto; }   /* column will not push page taller */
.content { flex: 1; overflow: auto; }

If the menu height is dynamic, use viewport calculations or set a CSS variable from JS and subtract it with calc:

/* CSS */
.col { height: calc(100vh - var(--menu-height, 0px)); overflow: auto; }

/* JS (run on load and resize) */
const h = document.querySelector('.header').offsetHeight;
document.documentElement.style.setProperty('--menu-height', h + 'px');

Troubleshooting notes: reset body margin, confirm box-sizing, avoid floats for layout (they remove elements from normal flow), and remember percent heights need explicit ancestor heights. For very old browsers, absolute positioning or a fixed header plus a 100vh content area are fallback options.

Recommended Answers

All 3 Replies

Member Avatar for MagicMedia

Try to put everything in a container div with a 100% height. Right now the second div is 100% height of the parent, which is the browser.

Member Avatar for Altairzq

Try to put everything in a container div with a 100% height. Right now the second div is 100% height of the parent, which is the browser.

Hello Magic, is this is what you mean?

I have now "menu" and "col" inside of "wrap", which is 100% height. Problem is, if I tell "col" to be 100% height also, it exceeds again the viewport height, because of the "menu" div. If I don't specify height, then it only expands to the text inside it.

Edited by Altairzq because: n/a
Member Avatar for socr18

Give this a try.

#menu {
background-color: #333;
color: white;
height: 40px;
float: left;
width: 100%;
}

#col {
background-color: #9CF;
display: block;
height: 100%;
width: 300px;
margin-left: auto;
margin-right: auto;
}

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.