2

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

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

我在这里有一个 jsfiddle 示例：http: //jsfiddle.net/Split98/cndej/但这有两个问题：a）它不允许 div C 在高度上仍然是动态的 b）我真的不' t 想使用 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 来做这件事。

多谢你们！

4

1 回答 1

1

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

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

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

于 2013-04-09T09:52:38.743 回答