div高度需要根据它旁边的div来增长答案

【问题标题】：div height needs to grow based on div next to itdiv高度需要根据它旁边的div来增长
【发布时间】：2011-09-24 16:51:47
【问题描述】：

这是页面的网址： http://whiterootmedia.com/test 当灰色 div 内容扩展时，我需要正确的棕色 div 来增长。我在棕色 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: 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>

【问题讨论】：

给标题一个固定的高度，你就可以开始了。
你能解释一下或者给我举个例子吗？
你说的是红色的<div>？你想给它100% 相对于身体的高度，对吧？
是的，但由于某种原因我无法让它工作
我在whiterootmedia.com/test上简化了代码

标签： javascript html css

【解决方案1】：

执行此操作的经典方法是使用称为Faux Columns 的技术。

想法是把重复的背景图片放在容器上，background-position: 100% 0把它放在右边，让它看起来像是右栏的背景。（右列将具有透明背景。）

您不必担心列的高度，因为背景会填充容器的高度。

【讨论】：

【解决方案2】：

试试这个脚本

var tree_height = $('.tree').height();
var tree_top = $('.tree').offset().top;
var ads_height = tree_height + tree_top ;
$('.ads').css('height',ads_height);

【讨论】：

【解决方案3】：

有一种简单的方法，为包装器设置overflow: hidden，为列设置padding-bottom: 9999px; margin-bottom: -9999px;

【讨论】：