Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

dynamic div height (grow property?)

Status
Not open for further replies.
shu745

shu745

Programmer
May 14, 2001
79
US
Hi all,

I have a div that has auto-scroll property set and the height is set to 100. Is there a property/attribute I can use to have the div height change depending on the content displayed in it BUT grow only to a max of 100 (at which point the div would scroll)? I don't want there to be a gap if the content takes up a smaller space than what's been allocated.

Much thanks for any assistance!
 
Sort by date Sort by votes
Do you know if there is going to be a predefined amount of space for each thing going in to the div tag...or is the user going to put something in it that you wont know how long its goin to be...I know you could put height="100%" but that won't stop at 100px (I assume your using pixels like height="100px")
 
Upvote 0 Downvote
The content comes from the database and so the height of the space the data would use is not known. I thought that there would be some kind of property or attribute that you could set and it would automatically grow. Is there no such thing?
 
Upvote 0 Downvote
Not that i Know of...Maybe tomarrow someone will see this thread a know of a property that can do what you want
 
Upvote 0 Downvote
If you do not specify the height of the div the assumed value is auto which does what you want - grow the height of the div according to its contents. The problem I could see is that you do not want it to grow beyond a certain point (what is your 100% at the moment). This you can do in the CSS2 with maxheight property but it is scarcely supported (IE does not support it, I am not sure about Mozilla and Opera though).

Since divs are just invisible blocks that hold content I am not sure what exactly could be the problem with the 100% height property. If you are applying special formatting to the div (border, background) and do not want to extend it 100% if there is not enough content try it with two divs.

<div style=&quot;height: 100%; overflow: auto;&quot;>
<div style=&quot;background: #00AA00; border: 2px dashed gray;&quot;>
Content
</div>
</div>

This way the content div will expand with the text and will be limited by the second div. The code provided won't really work as I explained since the height: 100% property works correctly only when inside an element with pixel specified height. But without seeing more of your code, this is all I can offer.
 
Upvote 0 Downvote

CSS does offer a max-height property, which you could set to 100px... Not sure about 'auto-growing' the height up to that, however.

Dan
 
Upvote 0 Downvote
jammer1221
&quot;...Maybe tomarrow someone will see this thread a know of a property that can do what you want...&quot;

Well, I've had a bit of a hack. I'd done something similar with IFRAMES for news feeds on an intranet, but it was a bit of a while ago.

shu745
Does the following help? I've had to set a &quot;minumum&quot; height, so that the DIV can expand a little, but you can always set this higher to (say) 50px.

<html>
<head>
<title></title>
<style type=&quot;text/css&quot;>

div.scrolling {
width: 200px;
height: 20px;
border: 1px solid #000000;
position: relative;
overflow-y : scroll;
}
</style>

<script language=&quot;JavaScript&quot;>
function FillTheDiv() {
alert(&quot;About to fill the div&quot;);
var theDiv = document.getElementById(&quot;theDiv&quot;);
theDiv.innerHTML = &quot;Hello <BR><BR><BR><BR><BR><BR><BR><BR><BR>there&quot;;

if(theDiv.scrollHeight > 100) {
alert(&quot;Need to grow the height&quot;);
theDiv.style.height = 100;
} else {
theDiv.style.height = theDiv.scrollHeight;
}
}
</script>

</head>
<body>

Heading<br>
<div class=&quot;scrolling&quot; id=&quot;theDiv&quot;>Loading... please wait.</div>
Footer<br>

<script language=&quot;JavaScript&quot;>
FillTheDiv();
</script>

</body>
</html>

Pete.



Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w: e: Pete.Raleigh(at)lclimited.co.uk
 
Upvote 0 Downvote
Unfortunately, I just realised where I was posting to... did you want to use JavaScript? :)

Pete.


Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w: e: Pete.Raleigh(at)lclimited.co.uk
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
639
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
184
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
129
tyutghf
tyutghf
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
206
ChrisHirst
ChrisHirst
dvannoy
  • Locked
  • Question
Center a div within an asp.net content placeholder 1
Replies
1
Views
457
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top