PDA

Click to See Complete Forum and Search --> : Expanding div height to variable content ?

Twistedmind
11-06-2007, 11:18 AM
Hello everyone,

I'd like to know if there is a way to set a div height to expand to the content if it (the content) is generated by a php script that searches a CSV file for a number and repeat a certain html template this number of time.

Ex: CSV find number 4, then it repeat "template.html" 4 times. So if template is 450px high, then the containing div will expand to 1800px.

I tried this, but i'm sure it's not the way to do it :


#containing_div { width:750px; height:auto }
#template_div { width:100%; height:450px }


TIA,
ray326
11-07-2007, 12:04 AM
That's just the way divs work. They're 100% wide and tall enough to hold their content. The browser doesn't care that it came from some scripting language on the server.
Twistedmind
11-07-2007, 07:52 AM
It must another problem coming from the stylesheet... I'll chek this.

thank you
Twistedmind
11-07-2007, 11:42 AM
After reading my first post, I noticed that the explanation wasn't very clear so I'll explain better.

Here's the CSS :

.template_sleeve { width:750px; background-color:#939498 }

.template_sidebar_a { float:left; width:6px; height:100%; background-image:url(images/sidebar_a.gif) }
.template_sidebar_b { float:right; width:6px; height:100%; background-image:url(images/sidebar_b.gif) }


and the HTML :

<center>
<div class="template_sleeve">
<div class="template_sidebar_a"></div>
<div class="template_sidebar_b"></div>
</div>
</center>


Now the php generated template will go just after the sidebars, but, it's height is variable since it expand depending on the amount of content. I'd want the sidebar to be the same height as the sleeve since the first template must "snap" to the second so that the sidebars looks like one seamless line instead of multiple part. I tried the CSS you see but it seems that the sleeve must have a defined height (which is changing) for the "height:100%" to work.

TIA,
sorry for not having explained first time.
Centauri
11-07-2007, 05:04 PM
it seems that the sleeve must have a defined height (which is changing) for the "height:100%" to work.

That is the css spec - a % height can only be referenced to the container height if the container height is explicity set. The best way around this is to use a repeating background graphic on .template_sleeve that makes it look like there are columns going full height - so-called faux columns (http://alistapart.com/articles/fauxcolumns).
wolbie77
08-29-2009, 08:32 AM
what i did is the following:

get the position of the footer div.

and set the min-height of the column which you want to grow to the new amount. if there are other divs above you have to distract the height of these off the amount you get out of the js function.

<script type="text/javascript">

function zxcPos(obj){
var rtn=[obj.offsetLeft,obj.offsetTop];
while(obj.offsetParent!=null){
var objp=obj.offsetParent;
rtn[0]+=objp.offsetLeft-objp.scrollLeft;
rtn[1]+=objp.offsetTop-objp.scrollTop;
obj=objp;
}
return rtn;
}

function test(obj){
document.getElementById('leftcol').style.minHeight = (zxcPos(obj)[1]-267)+ 'px';
}

</script>




and:

<body onload="test(document.getElementById('footer'));">