Best IT Recipes

CSS 100% Height and then scrolling div not page

Well, that’s why I still haven’t been able to find the answer question, so I decided to make my own.

I am trying to create a 100% fluid layout that I technically did. http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php

BUT, what I want to do now is to make the page 100% HIGH ... But I don’t want the page to scroll, I want the internal DIV to scroll.

So, I believe that I want it to detect the height of the viewing screen, go 100%, and then the IF content is longer than the screen, scroll through the DIV page, not the page.

Hope this makes sense.

Thanks in advance. Justin

+44
html css scroll
Apr 28 '10 at 16:51
source share
6 answers
<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 let you scroll the navigator and content area.

+50
Apr 28 '10 at 17:00
source share

This is another way to do this with all abs panels, it will not work on IE6, but I can provide workaround CSS for IE6 if this 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>&nbsp; <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>
+8
Apr 28 '10 at 17:21
source share

do overflow:auto for div

+6
Apr 28 2018-10-18T00:
source share

overflow: auto; in DIV style, you just need to know that the size of the div must increase so that it can show scrolls. If you increase the page size (which should be with the style = "overflow: hidden;" on the body) this will not work.

+2
Apr 28 2018-10-18T00:
source share

If you do not want to use the position: absolute (because it ruined your listing, if your fields should be different than all zeros), you can do this with a bit of JavaScript.

Customize your body and div to allow div scrolling:

 <body style='overflow:hidden'> <div id=scrollablediv style='overflow-y:auto;height:100%'> Scrollable content goes here </div> </body>

This method depends on the div having a set height, and for that we need JavaScript.

Create a simple reset function for scrollable div height

 function calculateDivHeight(){ $("#scrollablediv").height(window.innerHeight); }

And then call this function both when loading the page, and when resizing.

 // Gets called when the page loads calculateDivHeight(); // Bind calculate height function to window resize $(window).resize(function () { calculateDivHeight(); }
0
Jun 14 '16 at 23:16
source share

You can try the following:

 <!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> <style rel="stylesheet" type="text/css"> .modal{width:300px;border:1px solid red;overflow: auto;opacity: 0.5;z-index:2;} .bg{background:-webkit-linear-gradient(top,red,green,yellow);width:1000px;height:2000px;top:0;left:0;} .btn{position:fixed;top:100px;left:100px;} </style> </head> <body style='padding:0px;margin:0px;'> <div class='bg' style='position:static'></div> <div class='modal' style='display:none'></div> <button class='btn'>toggle </button> </body> <script> var str='',count=200; while(count--){ str+=count+'<br>'; } var modal=document.querySelector('.modal'),bg=document.querySelector('.bg'), btn=document.querySelector('.btn'),body=document.querySelector('body'); modal.innerHTML=str; btn.onclick=function(){ if(bg.style.position=='fixed'){ bg.style.position='static'; window.scrollTo(0,bg.storeTop); }else{ let top=bg.storeTop=body.scrollTop; bg.style.position='fixed'; bg.style.top=(0-top)+'px'; } modal.style.display=modal.style.display=='none'?'block':'none'; } </script> </html>
0
Feb 27 '17 at 14:00
source share


More articles:


All Articles