Dynamic DIV height with PHP

[stangn99]

Hi All....this looks like a nice place to ask questions :) I'll start off by saying that I'm a total noob.

I have a DIV with a static height set. Some dynamic content is being loaded into the DIV via PHP.

My problem is, when I click on a link :
1. Dynamic content loads
2. DIV height is set to 400px, and Overflow:hidden
3. Dynamic content requires more than 400px
4. Would like the DIV height to change from 400px to XXX to fit the content.

I'm using an animated/Sliding div box from some Javascript I found online. Everything works fine, I just need to be able to dynamically SET the DIV's height based on the DIV's ID.

Any ideas on this?

[ShawnCplus]

You can just use CSS.

height: auto;
min-height: 400px;

[Graphix]

You can do the following:

<script type="text/javascript">
function setHeight(id, newHeight) {
document.getElementById(id).style.height = newHeight;
return true;
}
</script>

~G

[harrierdh]

Graphix is correct. min-height will not work in IE < 7.

[ShawnCplus]

Graphix is correct. min-height will not work in IE < 7.

Google around for min-height hacks

[stangn99]

Thanks for all the replies.

I tried this code:

<script type="text/javascript">
function setHeight(id, newHeight) {
document.getElementById(id).style.height = newHeight;
return true;
}
</script>

But I dont even know if I'm putting it in right.

If its not too much trouble, can you provide the HTML and Javascript?

I'd like to try to actually understand it and see how it is implemented.

Thanks again for the help!

[Graphix]

My code is a function written in javascript that changes the height of an element in the document. If you would like the div to automatically become bigger when text is added within, you should use shawnCplus's solution. Here is the CSS you need (it includes browserhack):

<style type="text/css">
.divClass1 {
  min-height:400px;
  height:auto !important;
  height:400px;
}
</style>

And then you should change the following in your HTML where the div is located in which you put the text. You change that div into:

<div class="divClass1"></div>

This will result in that when the text's height is larger than 400px, the div will automatically become larger in height.

~G

[ricardo1966]

function setheight(theid){
myid=document.getElementById(theid)
myid.style.height=800+'px'
}
setheight(theid);
You need still to figure out the height the better option is not to set the height in the first place. The div will adjust the height to the contents

[aditya19897]

hi this solution worked for me somehow

i wish to expand the hieght of my div called <div class="Body">

so in the css file or in the internal stylesheet where ever you feel like perform these steps

.Body
{
min-height:300px; ////not compulsory to provide min-height BUT DO NOT PROVIDE
overflow:auto; ////very important it will resize your div tag to fit the contents
}////do not provide the height attribute as it fixes the size makes it rigid

Hope this helps this is my first post on this site