Overflow:Auto – Height Control with Scrollbars on Page Elements
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.

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!
![Being a Dev Dad]()
I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...
![CSS 3D Folding Animation]()
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...
![Fancy FAQs with jQuery Sliders]()
Frequently asked questions can be super boring, right? They don't have to be! I've already shown you how to create fancy FAQs with MooTools -- here's how to create the same effect using jQuery.
The HTML
Simply a series of H3s and DIVs wrapper...
![Drag & Drop Elements to the Trash with MooTools 1.2]()
Everyone loves dragging garbage files from their desktop into their trash can. There's a certain amount of irony in doing something on your computer that you also do in real life. It's also a quick way to get rid of things. That's...
my solution:
i placed a div at the end of the body content with the follow attributes:
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.
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.
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.
@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..
I use overflow:hidden alot!
overflow:auto; is a life saver for sure!
To clear floats. That’s it.
I dislike scrollable elements within a browser window.
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 fills100px
and then there is empty space of100px
under the table because div overflow is still there but no stroller. Is there a way with JavaScript to set some sort ofmax-height
so if content is not filling200px
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 :-)addition: data is from database and so it can not be predicted the amount of data present there.
“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.
Or use MooScroll: http://greengeckodesign.com/projects/mooscroll.aspx. =]
how to make the iframe as fully content on the page… i have set height=”100%” but the frame is still in scroll box..
I think we should use
max-height:400px;
and notheight:400px;
so that if the content-div height is smaller than400px
we won’t have a huge blank space !!!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
I’ve used the overflow to keep a fixed header and footer always visible