Question

我有两列，一列宽度灵活，另一列应扩展到剩余宽度。我有这样的设置：

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 80px;
    float: right;
    background: #aafed6;
    position:relative; /* Needed for positioning an element absolutely inside this dib */
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}

这里是小提琴：http://jsfiddle.net/dms53yt8/

我的问题是，我希望正确的div与左div具有相同的高度。如何在保留当前结构的同时做到这一点？

谢谢！ URI

Answer 1

此解决方案有效http://jsfiddle.net/ru02qxLx/

CSS添加

将position: relative;添加到.container课程。然后将position: absolute;，top:0;，bottom:0;和right:0;添加到您的.right班级

.container {
   height: auto;
   overflow: hidden;

   /* Added */
   position:relative;
}

.right {
    width: 80px;
    background: #aafed6;

    /* Added */
    position:absolute;
    top:0;
    right:0;
    bottom:0;
}

Answer 2

您可以为两个div添加padding-bottom和margin-bottom。请检查小提琴。

.right{
    padding-bottom: 500em;
      margin-bottom: -500em;
}

.left{
    padding-bottom: 500em;
      margin-bottom: -500em;
}

DEMO

Answer 3

如何将display: table用于容器div＆amp;儿童div display: table-cell？

以下是经过编辑的jsfiddle - http://jsfiddle.net/dms53yt8/4/

使浮动div扩展到页面高度

3 个答案: