javascript - CSS help request for DIV placement and scrolling -
i trying emulate 4 framed page divs, have encountered problems cannot resolve ... here quick sketch:
here css use style divs:
#wrapper { width: 100%; height: 90%; margin: 0 auto; } #leftpane, #rightpane { border: 1px solid black; float: left; color: white; background-color: white; height: 90%; top: 5%; } #leftpane { position: absolute; left: 0; bottom: 0; width: 50%; } #rightpane { position: absolute; left: 50%; bottom: 0; right: 0; } #topmenu { position:fixed; top:0px; height:5%; background-color: gray; } #footer { position: fixed; bottom: 0; left: 0; width: 100%; }
and here divs create:
<div id="wrapper"> <div id="topmenu"></div> <div id="leftpane"></div> <div id="rightpane"></div> </div> <div id="footer"></div>
the content of div set via ajax call , in fact happens entire page scrolls ... divs, text :(
i'd following behaviour: left , right divs scrollable independently each other , top menu , footer stay there regardless of in left/right panes , how text in them (right left/right pane content overwrites footer div if there text :( ).
(yes, before divs had page design frames there working (as expected :) ), due feature request needed switch div'd design. , please indulgent beginner level question :) ... learning css, javascript , web programming :) )
simple enough. added colors can see different boxes. you'll noticed had add few things make them visible, height. main thing need though overflow-y:auto
z-index
on header important otherwise covered when either of sides scrolls.
body { margin: 0; padding: 0; } #leftpane, #rightpane { position: absolute; border: 1px solid black; float: left; color: white; background-color: white; top: 5%; bottom: 5%; overflow-y: auto; } #leftpane { left: 0; right:50%; background: green; } #rightpane { left:50%; right: 0; background: blue; } #topmenu { position: fixed; top: 0; height: 5%; width: 100%; background: red; z-index: 99; } #footer { position: fixed; bottom: 0; height: 5%; width: 100%; background: orange; }
Comments
Post a Comment