Question

我很难过这个。我实际上尝试了从浮动div到绝对\相对定位到表格单元格的所有内容。也许有一个更好的方式来说出问题，但我试图在容器中有两列。这些列都是未知的高度，因为它们充满了动态内容。列必须增长到高度相互匹配，但每列都包含一个具有特殊背景和边框的“框”（因此我不能只做边距：-5000px;填充：5000px;黑客）。

我也尝试过jQuery，其中每个框的底部都有一个“增长因子”。在$（window）.load（）上，我计算每列的高度，并将最小div上的增长因子设置为差值。这可以，但你可以看到div捕捉，我宁愿避免JS。我必须等到$（window）.load（），因为其中一列包含影响高度的图像。

我嘲笑了Fiddle here

这就是我所拥有的：

（评论中的链接）

这就是我想要的：

（评论中的其他链接）

这是我的HTML和CSS：

<div>Some stuff on the top</div>

<div class="container">
    <div class="column left-column">
        <div class="box">
            <div class="box-header">Box Header Left</div>
            <div class="inner-box">
                <div class="random-block-element">LEFT</div>
                <div class="random-block-element">LEFT</div>
                <div class="random-block-element">LEFT</div>
                <div class="random-block-element">I neeed to somehow fill the remaining space.  The "box" (grey) should fill the column and the inner part of the box (this white) should fill the box, leaving the margins and padding intact</div>
            </div>
        </div>
    </div>
    <div class="column right-column">
        <div class="box">
            <div class="box-header">Box Header Right</div>
            <div class="inner-box">
                <div class="random-block-element">RIGHT</div>
                <div class="random-block-element">RIGHT</div>
                <div class="random-block-element">RIGHT</div>
                <div class="random-block-element">RIGHT</div>
                <div class="random-block-element">RIGHT</div>
                <div class="random-block-element">RIGHT</div>
                <div class="random-block-element">RIGHT</div>
                <div class="random-block-element">RIGHT</div>
                <div class="random-block-element">RIGHT</div>
                <div class="random-block-element">RIGHT</div>
                <div class="random-block-element">RIGHT</div>
                <div class="random-block-element">RIGHT</div>
                <div class="random-block-element">RIGHT</div>
                <div class="random-block-element">RIGHT</div>
            </div>
        </div>
    </div>

</div>
<div style="clear:both;"></div>

<div>Some stuff on the bottom, I need to be pushed down as the div set grows</div>

CSS：

.container {
}

.column { 
    float: left;
}   

.left-column {
    width: 300px;
    margin-right: 10px;
}

.right-column {
    width: 200px;
}

.box { 
    background: grey;
    border-radius: 5px;
    padding: 10px;
}

.inner-box {
    background: #FFF;
    padding: 0 10px;
    border-radius: 0 0 10px 10px;
}

.box-header {
    background: #FFFF00;
    border-radius: 10px 10px 0 0;
    height: 30px;
}

Answer 1

以下是我对display：table，row和cell所做的事情。绝对检查一下定位 http://jsfiddle.net/M9JWM/3/

//basic structure
<div class="table">
<div class="row">
    <div class="left">
    Lorem    
    </div>
    <div class="right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

CSS

.table{
display: table}
.row{
display: table-row}
.left.right{
display: table-cell}

Answer 2

使用jQuery检查每个框的高度并进行相应调整。除了jQuery之外，我还在你的左右框中添加了id（就像这样：<div class="box" id="left-box">）

var left_height = $('#left-box').height();
var right_height = $('#right-box').height();

if(left_height>right_height){
     $('#right-box .inner-box').css("height", left_height-30);
}else{
     $('#left-box .inner-box').css("height", right_height-30);
}

从高度减去30以调整填充。添加或删除行，框彼此一致。

两个并排的栏目，儿童和儿童的孩子填充100％减去边际

2 个答案:

jsFiddle Demo