0

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?

6
Contributors
8
Replies
14
Views
7 Years
Discussion Span
Last Post by aditya19897
0

You can do the following:

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

~G

0

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!

0

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

Edited by Graphix: n/a

0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.