Menu
Okay so I haven't been able to find a question with an answer yet, so I decided to make my own.
I am trying to create a 100% fluid layout, which technically I have done. http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php
BUT, what I want to do now, is to make the page 100% in HEIGHT... But I don't want the page to scroll I want the inner DIV to scroll.
So I believe in short I want it to detect the height of the viewport screen, go 100%, and then IF content is longer then the screen, scroll the specific DIV, NOT the page.
I hope this makes sense.
Thanks in advance. Justin
635
Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
To get the height of the scroll bar the offsetHeight of div is subtracted from the clientHeight of div. OffsetHeight = Height of an element + Scrollbar Height. ClientHeight = Height of an element. Height of scrollbar = offsetHeight – clientHeight.
overflow: scrollSetting the value to scroll , the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it): You can use the overflow property when you want to have better control of the layout.
<html> <body style="overflow:hidden;"> <div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0"> </div> </body> </html> That should do it for a simple case
I believe this will work for your case
<html> <body style="overflow:hidden;"> <div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div> <div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div> <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div> <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div> </body> </html> this example will give you a static header and footer and allow the navigator and content area to be scrollable.
159
This is a different way to do this with all abs panels, it will fail on IE6, but I can provide the workaround CSS for IE6 if that is a requirement:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Fluid Layout</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> <style rel="stylesheet" type="text/css"> body { background-color:black; margin:0px; padding:0px; } .pageBox { position:absolute; top:20px; left:20px; right:20px; bottom:20px; min-width:200px} .headerBox { position:absolute; width:100%; height:50px; background-color:#333; } .contentBox { position:absolute; width:100%; top:52px; bottom:32px; background-color:blue; } .footerBox { position:absolute; width:100%; height:30px; background-color:#ccc; bottom:0px; } .contentBoxLeft { position:absolute; width:20%; height:100%; background-color:#b6b6b6; } .contentBoxRight { position:absolute; width:80%; left:20%; height:100%; background-color:white; } .contentBoxLeft, .contentBoxRight { overflow:auto; overflow-x:hidden; } </style> </head> <body> <div class="pageBox"> <div class="headerBox">Header</div> <div class="contentBox"> <div class="contentBoxLeft">ContentLeft asdf asdf adsf assf</div> <div class="contentBoxRight">ContentRight asdf asdfa dasf asdf asdfd asfasd fdasfasdf dasfsad fdasfds<br /><br />asdfsad ff asdf asdfasd</div> </div> <div class="footerBox">Footer</div> </div> </body> </html> make overflow:auto for the div
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
