Question

所以我尝试了多种解决方案，但似乎没有一种解决方案适用于我的布局。我希望拥有的是2列，每列有2个div占据父节点宽度的100％。每个div的高度根据内容而变化。

所以想法是，左边的2列将确定两列的高度，最后一个div（右下角）将可滚动并占据剩余的空间。

我在jsfiddle中有一个示例：http://jsfiddle.net/Split98/cndej/但是有两个问题： a）它不允许div C在高度上仍然是动态的 b）我真的不想使用display：table-cell

此外，当我尝试在我的网站上实施此临时解决方案时，一切都破了。因此，我并没有尝试修复某些问题，而是在考虑解决方案，而不是在寻求帮助。

现在我知道有很多关于高度相等的问题，但我找不到解决问题的方法：左右div的高度相同，并且所有4个div都占据了空间。

所以它是最基本的形式（如果可能的话，我希望在没有表格单元的情况下实现这一目标）：

<div id="wrap">
 <div class="left">
   <div class="A">A</div>
   <div class="B">B</div>
 </div>
 <div class="right">
  <div class="C">C</div>
  <div class="D">Need this to expand to fill</div>
 </div>
</div>


.left {
 width: 200px;
 display: table-cell;
}

.right {
 position: relative;
 width: 200px;
 display: table-cell;
 background: yellow;
} 

.A {
 background: blue;
 height: 100px;
}

.B {
 background: pink;
 height: 200px;
}

.C {
 background: red;
 height: 50px;
}

.D {
 width: 100%;
 position: absolute;
 bottom: 0;
 left: 0;
 top: 50px;
 right: 0px;
 background: green;
}

我也不反对使用Javascript，但我对此并不是很强大。最好是，如果可能的话，我想用CSS做这件事。

谢谢你们！

Answer 1

如果选择JavaScript，您可以将此解决方案与jQuery一起使用。

$(function(){
    $('.D').height( $('.right').height() - $('.C').height() );
})

http://jsfiddle.net/cndej/3/

用Scrollable Div填充剩余高度

1 个答案: