使浮动div扩展到页面高度[重复]答案

【问题标题】：Make floating div expand to page height [duplicate]使浮动div扩展到页面高度[重复]
【发布时间】：2015-01-01 10:42:06
【问题描述】：

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

.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 具有相同的高度。如何在保持当前结构的同时做到这一点？

谢谢！乌里

【问题讨论】：

stackoverflow.com/questions/1205159/… ♦ stackoverflow.com/questions/2114757/css-equal-height-columns ♦ stackoverflow.com/questions/14763363/… 我相信你会在 SO 上找到其他类似的问题。

标签： html css

【解决方案1】：

将display: table 用于容器div 和display: table-cell 用于子div 怎么样？

这是编辑后的 jsfiddle - http://jsfiddle.net/dms53yt8/4/

【讨论】：

太棒了！我怎么没有想到这一点。非常感谢。

【解决方案2】：

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

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

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

DEMO

【讨论】：

【解决方案3】：

此解决方案有效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;
}

【讨论】：