How to have fixed height DIV where content can expand DIV without scroll bar

Posted on 2009-04-29
Last Modified: 2012-05-06
I have a problem which I have boiled down to its basic form.

I would like to set a fixed height for a DIV tag but if the content within the div exceeds the height of the DIV tag then I want the DIV tag to expand. I DO NOT want a scroll bar to appear.

I have set up the following 3 examples in which I make use of the CSS overflow attribute. The DIV tag is set to a height of 200 pixels.

1. No overflow >

2: With overflow:visible >

3. With overflow:auto >

Any help would be appreciated.
Question by:mike99c
    LVL 6

    Accepted Solution

    if you change height to min-height in the css for example 1 it will do what you want.

    However the css option of min-height is not supported by ie 5 or 6.

    You can find more info on the related css hacks that make ie6 behave below.

    Hope it helps.

    Author Comment

    Thanks qxp071,

    It works great. I actually found a better min height hack which only involves a CSS hack rather than the CSS and HTML hack in your example.

    I just tried it out and it works in IE5.5 and IE6.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 Mobile App Development with PhoneGap

    PhoneGap can help you leverage your already existing HTML5, JavaScript, and CSS skills in order to create and deploy cross-platform mobile apps.This program comprehensively covers HTML5 mobile app development from top to bottom.

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now