使两个浮动CSS元素具有相同的高度

我有两个可以在高度上变化的元素，并且两个元素都相邻。问题是如果一个盒子比另一个盒子高，它看起来很难看。所以我希望他们成为同一个高度。使两个浮动CSS元素具有相同的高度

一种方式我觉得可能工作会太来包装他们在一个div容器，并希望更高的一个调整它的大小和较小的一个扩展以适应空间：

HTML：

<div id="outerBox"> 
<div class="innerBoxLeft"></div> 
<div class="innerBoxRight"><br /><br /><br /></div> 
</div>

CSS：

.outerBox 
{ 
width: 100%; 
} 

.innerBoxLeft 
{ 
float:left; 
width: 45%; 
height: 100%; 
} 

.innerBoxRight 
{ 
float:right; 
width: 45%; 
height: 100%; 
}

不工作。我相信这可能是因为外部div没有设置高度，出于某种原因，较小的盒子和100％的高度没有任何可操作的地方。然而，我不能给它一个高度，因为这会打败这一点。

所以，除非有另一种方式，我想我问：我如何设置一个子元素的高度为它的父级？

感谢

做到以下几点，而不使用JavaScript

来源

2009-07-23 Damien

你为什么不使用一个表？

这太可笑了。用户想要看一张桌子。 HTML语言提供了一个表格元素来实现用户所需的目标。然而，我们使用整个库（我看着JQuery的答案）来实现无表的目标，即使它意味着在客户端上运行的脚本！

来源

2009-07-23 14:49:06

一种方式是通过一个叫仿皮列技术。

它基本上涉及将background-image应用于浮动元素的父元素，这使得您相信这两个元素是相同的高度。

的更多信息，请访问：

A List Apart: Articles: Faux Columns

来源

2009-07-23 14:24:01

我看到了这一点，但框是设计相当模块化的（也就是说，它们是风格的框），所以我不确定这个解决方案有多理想。 – Damien 2009-07-23 14:27:59

有几种方法可以有不同程度的复杂性和成功的。一种技术为我的作品（~~我不记得在那里我看到了它的第一~~link，problems）如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>test</title> 
    <style type="text/css"> 
     #page { 
      clear:both; 
      overflow:hidden; 
      width:100%; 
     } 
     #page div { 
      margin:0 0 -6000px 0; /* nothing special about 6000px */ 
      padding:0 0 6000px 0; /* any large enough value will do */ 
     } 
     div.article { 
      background:blue; 
      float:left; 
      width:70%; 
     } 
     div.sidebar { 
      background:red; 
      float:right; 
      width:30%; 
     } 
    </style> 
</head> 
<body> 

<div id="page"> 
    <div class="article"> 
     <p>Some content</p> 
    </div> 
    <div class="sidebar"> 
     <p>Some content</p> 
     <p>Some content</p> 
     <p>Some content</p> 
    </div> 
</div> 
</body> 
</html>

来源

2009-07-23 14:30:21

几乎在那里，期待它切割盒子的底部。当我进展时，我会更新 – Damien 2009-07-23 14:34:40

@Damien是的，包含的`div`上的`border-bottom`将被截断。我通常围绕这个设计，但是我的设计并不复杂。 – 2009-07-23 14:39:07

另请注意，此布局与锚点（例如常见问题解答页面） – 2009-07-23 19:01:24

百分比却鲜有作为的高度在CSS工作。为了使孩子的身高与他们的父母相同，你可以使用一些Javascript。下面是它会是什么样子jQuery中：

<script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(function() {  
      var containerheight = $("outerBox").height; 
      $(".outerBox").children().css("height",containerheight) 
    </script>

如果你想只是做一个容器内箱尺寸相同，灯丝集团有很大的插件用于平衡箱高度与jQuery，这是非常有据可查的：

Equal Heights With jQuery

来源

2009-07-23 14:33:34 Andrew

投票下来到无穷远，如果你喜欢，但我觉得我还不如怪人一个表中的这部分设计...

来源

2009-07-23 14:43:05 Damien

我认为应该使用表格来创建它们的内容 - 即存储数据，而不是显示布局。

如果你想好，跨浏览器&黑客免费的CSS解决方案 - check this article。

来源

2009-08-07 08:22:11 zeroDivisible

function setSameHeight(class_name){ 
    var max_height = 0; 
    var cards = getElementsByClassName(class_name);  
    for (var i=0; i<cards.length; i++){ 
    if (cards[i].offsetHeight > max_height){     
     max_height = cards[i].offsetHeight; 
    } 
    } 
    for (var i=0; i<cards.length; i++){ 
    cards[i].setAttribute("height", max_height); 
    cards[i].height = max_height;   
    } 
} 

function getElementsByClassName(className){ 
    var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)"); 
    var allElements = document.getElementsByTagName("*"); 
    var results = []; 
    var element; 
    for (var i = 0; (element = allElements[i]) != null; i++) { 
    var elementClass = element.className; 
     if (elementClass && elementClass.indexOf(className) != -1 &&  hasClassName.test(elementClass)) 
     results.push(element); 
    } 
    return results; 
}

使用提供表

来源

2011-06-28 07:07:01 megamanx

试试这个：http://www.filamentgroup.com/examples/equalHeights/

这是一个易于使用的jQuery插件，你可以只使用父容器上所有的顶级子元素被调整为与最高的一样高。

来源

2012-10-24 18:33:30

使用display:table-cell;

这是两列非常有用的电子邮件设计（宽响应）。

查看demo这里。

来源

2013-11-08 03:43:01 raven

function evenup(){ 
     var maxHeight = Math.max.apply(null, $(".myClass").map(function(){ 
      return $(this).height(); 
     }).get()); 
    $(".myClass").height(maxHeight); 
}

来源

2014-09-09 18:39:29 Shawn

如果你真的想要一个div像一个表一样，你可以自定义CSS的“显示”的div。

显示：为div容器表

显示：对于DIV表细胞内作为TD

来源

2015-08-13 09:29:10 Andrew

使两个浮动CSS元素具有相同的高度

回答

相关问题