Member Avatar for Kschikan

So, I'm making a page with navigation bars on the left and the right, and I want them to extend to the bottom of the page regardless of the length of the content of either the nav bar, or the page content. Right now my navigation is done with a table. I've tried setting the height attribute to 100% to no avail. If possible, I'd like to do this with CSS, in a browser independent way. Any suggestions?

Thanks in advance

  • 3 Contributors
  • 5 Replies
  • 370 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Kschikan

Dani AI

Generated

Good thread — the original table approach and the absolute-position trick mentioned by are common dead-ends. and were right that a repeating background can fake full-height columns, but that technique breaks easily with fluid/responsive widths. Below are modern, robust patterns that avoid the IE6/positioning problems and keep sidebars matching the page height whether content is short or long.

A concise, reliable solution is Flexbox. The container becomes a horizontal flex row and is forced to at least the viewport height; its children automatically stretch to the same height:

<div class="page">
  <aside class="nav left">Left nav</aside>
  <main class="content">Main content</main>
  <aside class="nav right">Right nav</aside>
</div>
.page { display: flex; min-height: 100vh; }    /* makes a full-height row */
.nav  { flex: 0 0 15%; padding: 1rem; background: #b5a642; }
.content { flex: 1; min-width: 0; padding: 1rem; }

This handles short pages (sidebars reach viewport bottom) and long pages (container grows and sidebars grow with it). Grid offers the same benefit with display: grid; grid-template-columns: 15% 1fr 15%; min-height:100vh; if a column/row layout is preferred.

If supporting very old browsers is required, use a table-cell fallback: set the outer wrapper to display: table; width:100%; and children to display: table-cell; — or keep the old “faux column” background as a last resort. Common pitfalls to check: avoid absolute positioning for sidebars (it removes them from flow), ensure a parent height is set when using percentage heights, and watch 100vh quirks on mobile (address-bar resizing). For historical IE6 issues, fallbacks are preferable because modern browsers fully support the Flexbox/Grid approach.

Recommended Answers

All 5 Replies

Member Avatar for bkendall

It would be helpful if you had an example for us to look at but the easiest way to give the impression that a "bar" goes the length of the page is to put a bgcolor on the cell so that it matches. if you want an image to extend the full length of the cell you can use a repeating bgimage.

Both of these can also be done with css as well and there are lots of good examples out there just google css 3 column layouts. http://www.saila.com/usage/layouts/

Member Avatar for Kschikan

Apologies. A testing version of the page I'm working on can be found at If you'll notice the nav bars to the left and the right (in old gold) they don't extend to the bottom of the page. They are colored just fine, but the table ends and I'm left with blank space at the bottom. I couldn't find any solutions on the link you provided (although I may have just missed them) Any more help?

Member Avatar for Kschikan

I figured out how to do this. The best way is to us a div, instead of a table. (which really cut down on filesize and makes it render faster anyway :mrgreen: ) the code for the right nav bar is included below.

#right {
position: absolute;
top: 0px;
right: 0px;
width: 15%;
min-height: 100%;
background-color: #B5A642;
}

Unfortunately, IE6 doens't render this correctly. (Curse you, Microsoft!) Anyone know of a hack to make this work in IE also?

Member Avatar for Narue

>Anyone know of a hack to make this work in IE also?
Use a background image with a different color for the navigation bar. Repeat it down the page, then set up your divs so that they fit nicely onto the image. The effect is a perfect navigation bar that goes all the way from the top to the bottom regardless of page length or window size.

Member Avatar for Kschikan

>regardless of page length or window size.

While a background image will work regardlesss of page length, I'd have to disagree about window size. My columns are relative width (and I'd like to keep them that way) which means that someone viewing on a 800x600 might see the "bar" fine, but someone on a 1280x1024 resolution like me will notice that something's amiss. Not to mention that I have a nav bar on both sides of the page, and then my background image will either only cover one of them, or I'll run into the window size problem again

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.