div height needs to grow based on div next to it
Here's the url to the page: http://whiterootmedia.com/test I need the right brown div to grow when the grey div content expands. I'm vertically repeating a background image in the brown div.
<body style="margin: 0px; min-width: 700px; height: 100%;">
<div class="site" style="background: yellow; min-width: 577px; height: 100%;">
<div class="banner" style="background: blue; height: 100px; width: 417px; float: left;">
Banner Banner Banner Banner Banner
</div>
<div class="body_container" style="background:开发者_Go百科 pink; height: 100%;">
<div class="ads" style="background: brown; width: 160px; position: absolute; right: 0px; height: 100%; clear: left;">
Ads Ads Ads Ads Ads Ads Ads Ads Ads
</div>
<div class="tree" style="background: grey; white-space: nowrap; width: auto; min-width: 417px; clear: left;">
Content Content Content Content Content Content Content Content Content Content
<br />
</div>
</div>
<div class="grass" style="background: green; height: 100px;">
</div>
</div>
</body>
The classic way of doing this is using a technique called Faux Columns.
The idea is to put the repeating background image on the container, and background-position: 100% 0 to put it on the right side and make it look like it's the background of the right column. (The right column would have a transparent background.)
You don't need to worry about the height of the column, since the background fills the height of the container instead.
Try using this script
var tree_height = $('.tree').height();
var tree_top = $('.tree').offset().top;
var ads_height = tree_height + tree_top ;
$('.ads').css('height',ads_height);
there is easy way, set overflow: hidden for wrapper and for columns set padding-bottom: 9999px; margin-bottom: -9999px;
加载中,请稍侯......
精彩评论