Question

这是页面的网址： 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>

Answer 1

这样做的经典方法是使用名为Faux Columns的技术。

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

您无需担心色谱柱的高度，因为背景会填充容器的高度。

Answer 2

尝试使用此脚本

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

Answer 3

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

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

3 个答案: