Question

我有这个HTML：

<div id="wrapper">
   <div id="left">left<br/>asdfa</div>
   <div id="right">right</div>
   <div style="clear:both"></div> 
</div>

和css：

#wrapper {
   width: 400px;
   background-color:green;
   display:table;
}
#left {
   display:table-cell;
   float:left;
   width:100px;
   background: blue;
}
#right {
   height:auto;
   width:100px;
   background: red;
   float:right;
}

如何使正确的div适合包装div的高度？

Answer 1

有两种方法可以做到：

1）为所有3个DIV设置相同的高度：

#wrapper {
   width: 400px;
   background-color:green;
   display:table;
    height:50px;
}
#left {
   display:table-cell;
   float:left;
   width:100px;
   background: blue;
    height:50px;
}
#right {
   width:100px;
   background: red;
   float:right;
    height:50px;
}

演示： fiddle

2）

添加：

#right {
   height:100%;
   overflow:auto;
}

演示： fiddle

Answer 2

Fiddle

#right {
   text-align: right; 
   display:table-cell; 
   height:100%;
   width:100px;
   background: red;
   position: relative; 
}

Answer 3

你可以尝试一下，告诉我它是否有效。

的style.css

#right {
position: relative;
height: 100%;
width: 100px;
background: red;
float: right;
}

Answer 4

如果上面的CSS修复工作，使用jQuery可能有点矫枉过正，但是Zurb的人们展示了一种非常简洁的方式来平衡div的高度：

https://github.com/zurb/foundation/issues/1358

以下是网格代码段和块网格代码段的一些示例HTML。您会注意到一些数据属性，data-match-height和数据高度关注。这些用于范围元素的父级你想要同样的高度，并标记将要看的孩子匹配高度。
<div class="row" data-match-height>
  <div data-height-watch class="small-3 columns" style="background: pink;">
    <p>Some text...</p>
  </div>
  <div data-height-watch class="small-6 columns" style="background: orange;">
    <p>Some text...</p>
    <img src="http://placehold.it/300x300">
  </div>
  <div data-height-watch class="small-3 columns" style="background: lightblue;">
    <p>Some text...</p>
  </div>
</div>
从这里开始，我创建了一个可以实现魔术的JS：
$("[data-match-height]").each(function() {

  var parentRow = $(this),
      childrenCols = $(this).find("[data-height-watch]"),
      childHeights = childrenCols.map(function(){ return $(this).height(); }).get(),
      tallestChild = Math.max.apply(Math, childHeights);

  childrenCols.css('min-height', tallestChild);

});
您可以在app.js中将此JS包含在页面底部的JS链接下。

Answer 5

<强> HTML

       <div id="left">left<br/>asdfa</div>
       <div id="right">right</div>    
       <div style="clear:both"></div> 
    </div>

<强> CSS

#wrapper {
    width: 400px;
    background-color: green;
    display: table;
}
#left {
    display: table-cell;
    float: left;
    width: 100px;
    background: blue;
}
#right {
    background-color: red;
    display: table-cell;
    padding-top: 5px;
    width: 50%;
}

<强> Fiddle

Answer 6

不需要这么多更新。

只在 #right css中加上 display：table-cell 。而已。它会解决你的问题。

Answer 7

使用javascript的新answare

FIDDLE：http://jsfiddle.net/62DQ8/62/

在<head>HERE</head>

中添加此内容

<script language="JavaScript" type="text/javascript">
var h = document.getElementById("wrapper").offsetHeight;
document.getElementById("right").style.height = h + "px";
</script>

Answer 8

使用这个相等高度的jquery

setHeight($('.wrapper > div'));

function setHeight(col) {
    var $col = $(col);

    var $maxHeight = 0;
    $col.each(function () {
        var $thisHeight = $(this).outerHeight();
        if ($thisHeight > $maxHeight) {
            $maxHeight = $thisHeight;
        }
    });
    $col.height($maxHeight);
}

css等于div高度

8 个答案: