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

Recent Features

  • 5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • Better Pull Quotes with MooTools

    Chris Coyier authored a post titled Better Pull Quotes: Don't Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content -- instead he uses jQuery to dynamically create the pull quotes. The following is the...

  • Spoiler Prevention with CSS Filters

    No one likes a spoiler.  Whether it be an image from an upcoming film or the result of a football match you DVR'd, sometimes you just don't want to know.  As a possible provider of spoiler content, some sites may choose to warn users ahead...

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

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...

  • Copy a Directory from Command Line

    Copying a directory for the sake of backup is something I do often, especially when I'm trying to figure out why something isn't working when I use an external library.  I'll copy the directory structure as a backup, mess around with the original source until I find a solution,...

  • Hotjar &#8211; All-in-one Analytics and Feedback

    Website analytics are a massive business -- the more data you can collect with regard to your users' behaviors on your site, the more you can increase and maximise conversion...and increased conversion is always good.  Sometimes increase conversion means more money, improved user experience, viewer retention,...

  • Crafting a 3D React Carousel

    There is something in me that is amazed but beautiful 3D interfaces. And it doesn’t matter whether they’re functional like Gyroscope features menu, technology demonstrators like the amazing periodic table demo from famous or they’re artistic representation pushing the limits of...

  • Collaborative Editing in JavaScript: An Intro to Operational Transformation

    I've set out to build a robust collaborative code editor for the web. It’s called Codr, and it lets developers work together in real time - like Google Docs for code. For web developers, Codr doubles as a shared reactive work surface where every change is...