Geek Answers Handbook

How can I make this 100% height + column overflow layout in Firefox and IE?

I have a three-column layout that takes up 100% of the width and height of the browser (with padding). This layout contains two columns, which also occupy 100% of the height and should scroll independently.

Here is jsfiddle: http://jsfiddle.net/KdZ9A/2/ . Here's what it looks like in Chrome (preferably scrolling through individual columns):

enter image description here

and Firefox and IE (undesirable - body scrolling):

enter image description here

This works fine in Chrome; however, in Firefox and IE (10), the entire page scrolls instead of scrolling individual columns. I want the columns to overflow and scroll - not the body. Any idea how to make this work in Firefox and IE?

I also tried a slightly different approach using absolute positioning of the contents of the columns: http://jsfiddle.net/KdZ9A/3/ .

Here is the HTML I'm using:

<div id="container"> <div id="inner"> <div id="palette">palette</div> <div id="list"> <div class="content"></div> </div> <div id="editor"> <div class="content"></div> </div> </div> </div>

I use absolute positioning to achieve 100% height, and then displaying the table and cell table inside to reach 100% of the column height:

 * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; } body { position: relative; } #container { background-color: #f1f1f1; position: absolute; left: 20px; right: 20px; top: 20px; bottom: 20px; } #inner { display: table; height: 100%; } #inner > div { display: table-cell; } #palette { min-width: 180px; max-width: 180px; width: 180px !important; background-color: pink; } #list { width: 55%; min-width: 350px; background-color: cyan; } #editor { width: 45%; min-width: 400px; background-color: magenta; } .content { overflow: auto; height: 100%; }
+7
html css
source share
4 answers

I was 5 minutes from the change and HOLY KRAPU ... I GOT THIS WORK

http://jsfiddle.net/gFX5E/15/

This is based on a different approach that I talked about. I needed to wrap div.content and make the wrapper position relatively relative. I also added some headings to the columns.

HTML:

 <div class="content-wrap"> <div class="content"> ... </div> </div>

CSS

 .content-wrap { position: relative; height: 100%; } .content { overflow: auto; position: absolute; left: 0; top: 0; bottom: 0; right: 0; }

It seems to work in Chrome, Safari, Firefox, and IE8 +.

And here is a more semantic version of HTML5, which also adds a title at the top: http://jsfiddle.net/gFX5E/20/ . I believe that using IE8 will require the use of html5shiv.

+2
source share

If you are willing to settle for a fixed total width, here's how:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <style> * { padding: 0; margin: 0; box-sizing: border-box; /* makes filling up easier */ } html, body { height: 100%; } #container { position: relative; width: 980px; height: 100%; margin: auto; background: grey; } #palette { position: absolute; left: 0; top: 0; bottom: 0; right: 800px; background: pink; } #list { position: absolute; left: 180px; top: 0; bottom: 0; right: 450px; background: cyan; overflow-y: auto; } #editor { position: absolute; left: 530px; top: 0; bottom: 0; right: 0; background: magenta; overflow-y: auto; } </style> </head> <body> <div id="container"> <div id="palette">Palette</div> <div id="list" class="content"></div> <div id="editor" class="content"></div> </div> <script> $(function() { for (var i=0; i<20; i++) { $('.content').append('<p>Lorem ipsum [truncated for SO]</p>'); } }); </script> </body> </html>

Demo on this codec: http://codepen.io/anon/pen/aqgCm?editors=100 .

+1
source share

This is a pretty old post, but I thought I would comment. If you display: flex instead of display: table in the first example, that should fix the problem.

Also setting the trick for scroll heights of up to 100vh will also do the trick.

+1
source share

You should understand that browsers only use scrolling when they understand the size (i.e. height and width) of the content larger than the size specified for it. In your case, the height specified for the div is 100%. This effectively tells the browser to continue to increase the size of the div to the full content completely. Therefore, this creates a situation where scrolling is not needed, as the browser “fits” all the content in this div.

So, if you want the div (or paragraphs contained in it) to be scrollable, you would need to specify the height, and then tell the browser to scroll through content that will not fit the specified size.

I'm not sure if you want to scroll through individual “paragraphs” or the entire div (which contains these paragraphs) to scroll. In any case, you will need to specify a fixed height for scrolling, which will be useful. Your paragraph tag should have the following CSS to it:

 p { height: 200px; /*Some fixed height*/ overflow-y: scroll; }

Here is an example: http://jsfiddle.net/y49C3/

If you want your div called "content" to be scrollable (as opposed to paragraphs), you would need to apply the above CSS to the div.

 .content { overflow-y: scroll; height: 500px; }

You can see it here: http://jsfiddle.net/qF7Mt/1/

I tested this in Firefox (29) and IE 10 and it works great !!!

Hope this helps !!!

0
source share

More articles:


All Articles