0

我在根据 div B 的高度拉伸 div A 或根据 div A 的高度拉伸 div B 时遇到问题（取决于哪个内容最多）。

我尝试查看人造列，但由于我的 div 不在同一个“持有人”中，这无法正常工作......我当前的代码如下所示：

<div id="header">
    <div id="content">CONTENT HEADER</div>
</div>

<div id="content">
    <div id="column-left">
        <p>INHOUD LINKER KOLOM</p>
        <p>&nbsp;</p>
    </div>
    <div id="column-right">
        <p>INHOUD RECHTER KOLOM</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp; </p>
        <p>&nbsp;</p>
    </div>
    <div class="clear"></div>
</div>

<div id="main">
    <div id="content">
        <div id="main-content">
            <p>HOOFD INHOUD </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
        </div>
    </div>    
    <div class="clear"></div>
</div>

<div id="footer">
    <div id="content">CONTENT FOOTER</div>
</div>

使用 CSS 如下：

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.clear {
    clear: both;
}

#content { 
    position: relative;
    width: 950px;
    margin-left: auto;
    margin-right: auto;
    z-index: 10
}
#header {
    position: relative;
    min-width: 990px;
    width: 100%;
    height: 90px;
    background-color: #F00;
}
#column-left {
    width: 500px;
    float: left;
    background-color: #0F0;
}
#column-right {
    width: 450px;
    float: right;
    background-color: #00F;
    position: absolute;
    margin-left: 500px;
}
#main {
    min-width: 990px;
    width: 100%;
    background-color: #FF0;
}
#main-content {
    width: 500px;
    float: left;
}
#footer {
    min-width: 990px;
    width: 100%;
    height: 90px;
    background-color: #F00;
}

在我的示例中，您将看到我使“蓝色”div 的内容更长，而我想让“黄色”div 拉伸（因此页脚将在它们下方）

另一种方式也适用（如果“黄色” div 包含更多内容，“蓝色” div 应该拉伸......虽然如果我给出“黄色-蓝色”图像作为背景，这可以通过人造列解决到“蓝色”div）。图片示例：http ://tinypic.com/view.php?pic=jjpx0k&s=6

有人可以帮我弄这个吗？

任何帮助将非常感激！

4

1 回答 1

0

我查看了您的代码，您真的无法实现您想要做的事情，因为蓝色 div 是绝对的。

这样做的唯一方法是使用 jquery 并检测蓝色 div 的高度，然后将边距或高度添加到黄色 div 以腾出空间，使页脚看起来在蓝色 div 下方...

我希望这有帮助。

于 2013-04-10T04:13:50.807 回答