O'Reilly

Overflow:Auto – Height Control with Scrollbars on Page Elements

By on  

Many of the web designs my designer creates are very image-heavy. These designs are best fit for websites that wont have loads of content like restaurants, photographers, and graphics designers -- you know, sites where a picture says more than a thousand words. It's important on these types of sites to be able to control the height of the content areas so that the content DIV doesn't grow too high. The way I can do that is by using CSS' overflow property.

CSS Overflow

The CSS

#content { overflow:auto; height:400px; }

Overflow:Auto allows the customer to place as much content as they'd like within the content area without adversely affecting the page design. While I do everything I can to explain/convince customers that they should prune content and be concise, once the website is in their hands I can't do much about it.

What have you used this type of overflow for? Share!

Track.js Error Reporting

Upcoming Events

Recent Features

  • 9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

  • Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • CSS :target

    One interesting CSS pseudo selector is :target.  The target pseudo selector provides styling capabilities for an element whose ID matches the window location's hash.  Let's have a quick look at how the CSS target pseudo selector works! The HTML Assume there are any number of HTML elements with...

  • Introducing MooTools NextPrev

    One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item....

Discussion

  1. my solution:
    i placed a div at the end of the body content with the follow attributes:

    position:absolute; 
    top:0px; 
    bottom:-1px; 
    width:1em; 
    z-index:-1,
    

    ok – the scrollbar is always showing, not directly at the div element, but it prevents bad “jumping” effects switching between passed size content and overflow content.

  2. I’ve used the overflow to keep a fixed header and footer always visible. Kinda like having frames without using frames. I wanted to keep my options open wrt a footer with ‘ticker tape” content. I needed a “main body content that a user could scroll through.

  3. The correct use of overflow I think, is overflow:auto; so it only adds horizontal bars when needed. overflow:scroll; always adds scrollbars, and I don’t get the point of that.

  4. @Nacho: Thank you for your thoughts and I’ve updated my article. I use “scroll” sometimes because I know the customer will have that much content. After further consideration, you’re suggestion is probably the safer bet..

  5. I use overflow:hidden alot!

  6. overflow:auto; is a life saver for sure!

  7. Jeff Hartman

    To clear floats. That’s it.

    I dislike scrollable elements within a browser window.

  8. I’m currently using stroller for an online application. The stroller is used specifically for tables contain a lot of data and content after this table is also important and so this way user can view both table and other parts of that page.

    @david I have a question.
    I’m using scroll for the table content which always have different size of data. So if I set overflow height to lets say 200px and actual data fills 100px and then there is empty space of 100px under the table because div overflow is still there but no stroller. Is there a way with JavaScript to set some sort of max-height so if content is not filling 200px there won’t be any extra space. Sorry if this is confusing, kind of hard to describe without visual example. If you have any thoughts it would be great :-)

  9. addition: data is from database and so it can not be predicted the amount of data present there.

  10. “Overflow: auto;” is a good solution for confining content space. But if you’re using animations of any sort (think of a Coda slider), the scrollbars don’t play nice. And scrollbars usually don’t segue with the rest of the content and design.

    For aesthetic purposes, when I do control my DIV dimensions and use “overflow: auto;”, I also style the scrollbars (w/Mootools or w/o Moo).

    Here’s a Moo CSS-scrollbar script: http://solutoire.com/2008/03/10/mootools-css-styled-scrollbar/

    Personally, I style my scrollbars with a non-Moo script, and dynamically load the scrollbar script from my main JS file using Assets.

  11. how to make the iframe as fully content on the page… i have set height=”100%” but the frame is still in scroll box..

  12. I think we should use max-height:400px; and not height:400px; so that if the content-div height is smaller than 400px we won’t have a huge blank space !!!

  13. I love that solution – the only problem is that 3 out of 3 of my ipad browsers don’t support that solution and so dont show a scroller, only a box of text in the size i dtermined :( i guess nothing is perfect

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...

  • Tips you can Use to Build an Excellent eCommerce Experience

    There are many reasons to build a good eCommerce experience if you are planning to build an eCommerce website. Visitors can place items in their cart and leave your site without making a purchase. In fact, three out of every four of them will do so....