Jump to content

Fixing div height to 100% of screen display


Recommended Posts

I have a content area and a navigation menu inside divs. I have the overflow set to auto, and I want them to show scrollbars if they are larger than the physical screen. Right now, only the whole screen gets the scrollbar, I want ONLY the divs to have a scrollbar ONLY if they need it. Many times, the navigation menu will not need a scrollbar, but the content area will almost always need one.Here is my style:

<style type="text/css">                    body { height: 100% }                    .cqContainer { width: 100%; height: 100%; }                    .cqContainer .cqContent { float: left; width: 75%; height: 100%; overflow: auto;                                              border-right: 4px blue solid;  }                    .cqContainer .cqNav { float: right; width: 24%; height: 100%; overflow: auto;                                           font-family: Arial; font-size: 10pt; font-weight: bold; }                    .cqContainer .cqNav a { text-decoration: none; }                    .cqContainer .cqNav a:hover { color: red; }</style>

Basically, the body works out to:

<body>   <div class="cqContainer">       <div class="cqContent">            <!-- a whole bunch of stuff -->       </div>       <div class="cqNav">            <!-- some stuff, may be a whole bunch -->       </div>   </div></body>

This is easily done with frames, but I am sure there is a way and I just can't figure it out.Joe

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...