A blog & community for non-professional web designers, programmers, webmasters, and other web savvies.

CSS Maximum Height With Overflow Scrolling

June 25, 2010 - 12:00am -- aashni

This code allows you to create a maximum height for your div or content area, and if that maximum height is reached, it will automatically create a scrollbar, so that others can read the rest of the information.

You may ask why not just use: height:100px; overflow:auto; It's because with this code, if your content doesn't fill the original height, then the area for that content will decrease.

<style type="text/css">

.divName{
max-height:100px;
        overflow:auto;
}

</style>
<div class="divName" style="border:1px solid black;width:100px">text in a div that's less than 100px</div>
<br>
<div class="divName" style="border:1px solid black;width:100px">a lot of text in a div that's more than 100px will result in a scrollbar appearing</div>
Code Preview: 
text in a div that's less than 100px

a lot of text in a div that's more than 100px will result in a scrollbar appearing
Tags: 

@IceCaves on Twitter

    Stay Connected

    Twitter Facebook Tumblr Google+ Glaciallis Google RSS

    *Follow us on Twitter or Facebook to also follow minor site updates that don't make it to the homepage news.