Jump to content

[SOLVED] Dynamically change the height of one element to the size of another...


ripkjs

Recommended Posts

I'm looking to change the height of one element to the size of another.

 

Here is a screen shot for a better idea of what I'm talking about.

 

The red element is an include of a table. The height of this element will change depending on the content. Width will always be the same.

 

The orange element is an include of several other various htm files. This will always be much taller than the red element. I need the height of this to extend to the bottom of the light orange area (being the end of the red in the screen shot. For the screen shot's sake I gave the orange element a static height of 500px.)

 

I need the red element and orange element to have the exact same height, while red is dynamically defining this shared height. The overflow of only the orange can scroll.

 

Here is the basic code that is being used. Stripped out the PHP to shorten the example code. Using CSS to format these elements.

 

<body>
<div class="virtab">

<div class="banner">
</div>

<div class="head">
</div>

<div class="body">

<table>
<tr>
	<td>
		<div class="red">
			<?php
				//***RED ELEMENT***//
		        ?>
		</div>
	</td>
	<td>
		<div class="orange">
			<?php
				//***ORANGE ELEMENT***//
		        ?>
		</div>
	</td>
</tr>
</table>

</div>

<div class="foot">
</div>

</div>
</body>

Link to comment
Share on other sites

Yup, I'd like to actually extend that column down, not just have an illusion of it being the same. There's going to be actual content that will be in the orange area that I'd like to have the same height as the table to the left (red). If I don't give the orange a height, it extends down the page 2-3x longer than the red. Which wouldn't be an issue if the red element was always static, but rows will be added and removed over time.

 

Is there a way to use code to get the height of the red, then set that height in the CSS?

Link to comment
Share on other sites

After a bit of playing, I found this ghetto way of solving the problem... Might be a better one out there, but if it works, why fix it! :P

 

<div class="history" style="height:
<?php
	$points = 'BALANCES.HTM';
	$getPoints = file_get_contents($points);
	$countTR = substr_count($getPoints, "<TR");
	$h = 2; //Difference in header row
	$r = 22; //Height of each row
	$result = ($countTR*$r-$h);
	echo $result
?>
px;">

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.