How to make a scrolling HTML panel?

  • Thread starter Thread starter GaryB
  • Start date Start date
G

GaryB

Guest
I have an HTML div that is 100% wide and 600px high. I want another div to take up the entire rest of the browser window (in a fluid, resizing, scrollable manner). I understand about CSS box model scrollable but I'm not sure how to do the initial size setting and the handling of resizing. Do I need client-side code to handle a re-size event? What would that look like? Is there a way to just specify this behavior in the CSS? Should I use a frameset? Is there a better way? BONUS POINTS if the border between my 600px high top div and the bottom div is draggable to make the top height div's (initialized to 600px) changeable. I know I'll need javascript for that. Thanks you geniuses!
 
create a container div to hold all of the other divs / content

#web_container {
height: auto !important;
min-height: 100%;
min-width: 800px;
height: 100%;
width: 100%;
}

then make sure that the divs inside are set to width: 100%

to make the div scrollable its:

overflow:scroll;
 
Back
Top