Question

我遇到了基于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

有人可以帮我这个吗？

非常感谢任何帮助！

Answer 1

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

这样做的唯一方法是使用jquery并检测蓝色div的高度，然后向黄色div添加边距或高度以创建空间，以便页脚看起来位于蓝色div下... < / p>

我希望这会有所帮助。

基于彼此拉伸不同的div

1 个答案: