我在根据 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> </p>
</div>
<div id="column-right">
<p>INHOUD RECHTER KOLOM</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="clear"></div>
</div>
<div id="main">
<div id="content">
<div id="main-content">
<p>HOOFD INHOUD </p>
<p> </p>
<p> </p>
<p> </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
有人可以帮我弄这个吗?
任何帮助将非常感激!