jQuery change height on overflow

Question

i have a div and its height is fixed to 100px right now.

but its data is not static and a user can add as much data as he wants, i dont want scroll bars and it should get resized to data contained in it(height only) is there any css property to achieve this except than min-height as it doesnot work on IE.

the div may have multiple children and i am thinking to do something that doesnt involve calculating change of height of all children

thanks

do you need to mention a minimum height if there is nothing in the div? — sv_in
– sv_in, Commented May 23, 2011 at 7:19

Marcel · Accepted Answer · 2011-05-23 07:23:46Z

1

height in IE6 is essentially min-height anyway. If you don't have a problem using quick hacks -

div.blah {
    _height:100px;
    min-height:100px;
}

...otherwise, tuck it in some Conditional Comments so you can sleep at night.

<!--[if IE 6]>
    <style type="text/css">div.blah { height:100px; }</style>
<![endif]-->

edited May 23, 2011 at 7:23

answered May 23, 2011 at 7:17

Marcel

28.1k9 gold badges73 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sv_in Over a year ago

@Varun, The first property _height works only IE6 where height property works like min-height. For other browsers, min-height is the way to go

Varun Over a year ago

so its back to basic i have to perform JS actions on IE then, which dont want

Marcel Over a year ago

@Varun: There's no JS in my answer, only a minor CSS hack for IE6.

Aditya Manohar · Accepted Answer · 2011-05-23 07:18:09Z

0

You can specify height:auto;overflow:visible;. This will make the <div> autosize itself.

answered May 23, 2011 at 7:18

Aditya Manohar

2,2471 gold badge17 silver badges20 bronze badges

1 Comment

Varun Over a year ago

cant give height as auto, need some predefined structure

addedlovely · Accepted Answer · 2011-05-23 07:19:19Z

0

overflow:visible; height:100px;

Should work, no?

answered May 23, 2011 at 7:19

addedlovely

3,1943 gold badges25 silver badges37 bronze badges

1 Comment

Varun Over a year ago

will result in overlapping with other parts of page

daryl · Accepted Answer · 2011-05-23 07:34:12Z

0

Check out this plugin: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Hope I helped.

answered May 23, 2011 at 7:34

daryl

15.3k21 gold badges70 silver badges93 bronze badges

Comments

Varun · Accepted Answer · 2011-05-26 11:10:40Z

0

had to do using jQuery only calculated height of children and set it parent, css hacks dint helped

answered May 26, 2011 at 11:10

Varun

5,06112 gold badges57 silver badges86 bronze badges

Collectives™ on Stack Overflow

jQuery change height on overflow

5 Answers 5

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related