Question

187

Dynamically change height of div, based on content with preset width and height

rated 0 times [ 188] [ 1] / answers: 1 / hits: 21726 / 10 Years ago, fri, september 19, 2014, 12:00:00

I have a div with preset width and height. I need to change the height of that div based on content. I was looking for some JavaScript but couldn't find appropriate for me.

Here is my simple example, which needs an improvement http://jsfiddle.net/dmitry313/1zr6Lhwa/

HTML

<div id=content>

<h2>Text</h2>

<p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example </p> 

</div>

CSS

    h2 {

font:18px/30px Arial;

}   

#content {

width:200px;

height:100px;

border:1px solid #000;

background: yellow;

}

EDIT: Initially preset width and height are important and can't be changed

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazminkyrap

Add To Favorites

Follow

Total Points: 631

Total Questions: 89

Total Answers: 109

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

jazminkyrap questions

1 How to fix error: Fontconfig error: Cannot load default config file

Sat, Apr 17, 21, 00:00, 3 Years ago

1 How to return an attribute of clicked element in react?

Sun, Jul 5, 20, 00:00, 4 Years ago

1 why do I got Uncaught TypeError: response.text is not a function error when try to assignt body received as text to a variable in javascript

Sat, May 16, 20, 00:00, 4 Years ago

1 Error This line has a length of 182. Maximum allowed is 100 max-len

Thu, Apr 16, 20, 00:00, 4 Years ago

1 Selecting an html node's text content with htmlparser2 in Node.js

Mon, May 27, 19, 00:00, 5 Years ago

View All

answered 10 Years ago siena · Accepted Answer

Use min-height instead of height so that the <div> expands accordingly.

h2 {

    font:18px/30px Arial;

}

#content {

    width:200px;

    min-height:100px;

    border:1px solid #000;

    background: yellow;

}

<div id=content>

    

<h2>Text</h2>



    <p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example</p>

</div>