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

Posted on 2009-04-29
Medium Priority
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 > http://www.squareshape.co.uk/divoverflow1.htm

2: With overflow:visible > http://www.squareshape.co.uk/divoverflow2.htm

3. With overflow:auto > http://www.squareshape.co.uk/divoverflow3.htm

Any help would be appreciated.
Question by:mike99c

Accepted Solution

gxp071 earned 2000 total points
ID: 24261562
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

ID: 24263120
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.

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month16 days, 8 hours left to enroll

862 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