Geek Answers Handbook

Let the height <p> determine the height of the <div>

I have a paragraph of text inside a <div> that depends on length and therefore on height. I want the div to have a minimum height of 100px , but grows when the height of the <p> increases above 80px . I set the css height: 100px for the <div> , but when the <p> exceeded 80px , the text just spills out from the <div> , and the height of the <div> remains unchanged. What should I do?

Code:

 <div id="outer_box"> <div id="box"> <p class="content"> Some long paragraph of content here </p> </div> </div>

CSS

 #outer_box { width: 300px; min-height: 100px; } #box{ width: 300px; min-height: 90px; }

div with id="box" changed its height to fully contain <p> , but div with id="outer_box" did not change its height!

Interested in CSS solution, not jQuery, if possible, I will use everything that works. The reason for choosing a clean CSS solution is because the div does not exist until the user hovers over the mouse. Wondering how to target a div on css that doesn't exist yet

+4
source share
6 answers

Keep the minimum height set to div in your css, then I would use the jquery height function to figure out the height of the paragraph. Try this in your javascript:

 $(document).ready(function(){ var h = $('div p').height(); $('div').css("height", h); });
0
source

As Juggle said, you should use min-height . For most browsers:

 height: auto !important; height: 100px; min-height: 100px;
+3
source

Add this to the styles of your div, and everything should work fine, as well as for older browsers:

 min-height:100px; height:auto !important; height:100px;
0
source

The height of the div when setting the auto allows the content inside it to determine its length. However, min-height overrides and allows you to have a minimum height for the div

0
source

You set min-height to a div , and then deal with the old version of IE using the standard CSS hack:

 /* Because of the `* html` part, it only applies in IE, other browsers ignore it */ * html #theDiv { height: 100px; } /* Most browsers use this instead */ #theDiv { min-height: 100px; }

Living example

0
source

It seems to you that the word-wrap property is missing. I tested the following styles in ie9 and chrome. It seems to be working fine.

  <!DOCTYPE html> <html> <head> <style> #outer_box { width: 300px; min-height: 100px; background-color:blue; } #box{ width: 300px; background-color:green; word-wrap:break-word; } </style> </head> <body> <div id="outer_box"> <div id="box"> <p class="content"> Some long paragraph of content here kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p> </div> </div> </body> </html> Some long paragraph of content here kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk </ p>  <!DOCTYPE html> <html> <head> <style> #outer_box { width: 300px; min-height: 100px; background-color:blue; } #box{ width: 300px; background-color:green; word-wrap:break-word; } </style> </head> <body> <div id="outer_box"> <div id="box"> <p class="content"> Some long paragraph of content here kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p> </div> </div> </body> </html>
0
source

More articles:


All Articles