Geek asks and answers

How to create a DIV that extends UP to a height and then shows a scroll bar?

I am trying to implement DIVthat contains some text and behaves as follows:

  • Fixed Width (500 pixels)

  • Capture height (up to 400 pixels)

    • If the text displays a value <400px (say, 100px high), the containing DIV is the same height as the text (100px in our example).

    • If the text displays a value> 400px, the containing div is only 400 pixels high, and oveflow is handled using the vertical scrollbar in the DIV.

I know how to implement # 2 ( overflow: auto; position: relative), but this behavior depends on the presence height=400px, which, of course, negates the desired behavior # 1.

How can this be done with CSS?

I would prefer a reasonable cross-platform solution, if it's too complicated, should work on IE7, IE8 and FireFox 10+.

+3
source share
2 answers

Try a combination of max-heightand overflow: auto;.

An example .

+6
source

You can use the property max-height, but not height, but it will not work in IE6, which does not take into account any min / max properties.

If IE6 is required, you will have to abandon Javascript (the only other method with IE CSS expressions of their own, but they have very poor performance and rely on JS anyway).

0
source

More articles:


All Articles