Member Avatar for lordcamel

Hi guys,

I'm trying to create a 2 column layout for a site. The left div is for navigation, and contains a faux-column style repeat -- my goal is to have it be 100% of the body/document height all the time, NOT just the browser viewport height..

The right div is for content, and will have a variable height for each page.

Browse below to see my problem:

Be sure to size your browser so that there's a scrollbar. You'll see that scrolling down breaks the 100% height of the navigation, leaving a clean cut.

Does anyone know how to make the navigation div ALWAYS be 100% of the document height, even when the content on the right is very extensive?

Thanks so much =]

  • 5 Contributors
  • 4 Replies
  • 116 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by macneato

Dani AI

Generated

reported the classic "left column cuts off when the page scrolls" problem: the nav looks correct in the viewport but does not follow the full document height when the right content grows. Several replies pointed at percentage heights and wrapper tricks; those diagnose the right symptom but miss a few robust options.

Root cause (short): percentage height values reference a parent’s explicit height (or the viewport), and floated columns can make a wrapper collapse, so a nav set to 100% ends up tied to the viewport or a collapsed parent instead of the taller content. Modern, reliable fixes avoid those brittle percentage-height hacks.

Recommended (modern): make the two columns live in the same formatting context so the nav naturally matches the content height. The simplest is Flexbox:

/* HTML structure:
   <div class="layout"><aside class="nav">...</aside><main class="content">...</main></div>
*/
.layout { display: flex; align-items: stretch; }
.nav    { width: 220px; /* background-image can repeat-y here */ }
.content{ flex: 1; }

With this, the nav will stretch to the full height of the content area and will grow as content grows. Flexbox is well supported in modern browsers; see MDN for details on behavior and browser notes.

Fallbacks and alternatives:

  • Use display: table / table-cell on the wrapper/columns for broad legacy support (IE8+).
  • For very old browsers, keep the “faux column” approach (put the repeating-y graphic on a parent element so it always covers the document height) or use a small script that sets the nav height to the content height on load/resize.

References: MDN Flexbox guide and practical techniques for equal-height columns:

Recommended Answers

All 4 Replies

Member Avatar for drewpark88

Well you could possibly try making a class for that div in your CSS. Like the following:

div.container {
width: 100%;
}
Member Avatar for Cragdo

One way you could achieve this is by setting the left border of your wrapper to the same width as your nav class and then use positioning or negative margins in your nav class to overlay the border.

wrapper{
border-left:solid 200px #4c4c4c;
}

I haven't tried this myself and you will have to change your wrapper width to compensate for the 200px border but this will give the illusion that your nav div stretches the full height of your wrapper.

Member Avatar for cfajohnson

Member Avatar for macneato

Here is the fix you will need, just update your css to the following;

* {
            margin: 0;
        }
        
        html, body {
            height: auto;
        }
        
        body {
            font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
            font-size: 75%;
        }
        
        #wrapper {
            background: url() repeat-y;
        }
        
        #nav {
            border-left: 2px solid #666;
            border-right: 2px solid #666;
            width: 200px;
            margin: auto;
            float: left;
            height: 100%;
            color: white;
        }
        
        #main {
            border: 2px dotted black;
            position: relative;
            margin-left: 215px;
            width: 700px;
            height: auto;
        }

Only issue you will have now are those two borders, the quickest fix would be just to add them to your nav background image

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.