Question

我有两个元素，它们的高度可以不同，并且彼此相邻。问题是，如果一个盒子高于另一个盒子，它看起来很丑陋。所以我希望它们的高度相同。

我认为可行的一种方法是将它们包装在容器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％高度没有任何作用。我不能给它一个固定的高度，因为那样会打败这一点。

所以，除非有另一种方式，我想我会问：我怎样才能将子元素的高度设置为它的父元素？

由于

Answer 1

你为什么不用桌子？

这太荒谬了。用户想要查看表格。 HTML语言提供了一个表元素来实现用户想要的目标。然而，我们使用整个库（我正在查看JQuery答案）来实现没有表的目标，即使它意味着在客户端上运行脚本！

Answer 2

我认为表格应该用于创建它们 - 这就是存储数据，而不是显示布局。

如果你想要好，跨浏览器＆amp;无黑客的CSS解决方案 - check this article。

Answer 3

有几种不同程度的复杂性和成功的方法。一种对我有用的技术（~~我不记得我先看到它的位置~~ 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>

Answer 4

如果你愿意，可以将其投影到无穷大，但我想我也可以将这部分设计放在桌子上......

Answer 5

百分比很少在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>

如果你想在一个容器内放置相同大小的盒子，那么Filament Group有一个很棒的插件可以用jQuery来平衡盒子高度，而且它有很好的记录：

Equal Heights With jQuery

Answer 6

使用display:table-cell;

这在两列电子邮件设计（宽度响应）中非常有用。

在此处查看demo。

Answer 7

在不使用JavaScript的情况下执行以下操作的一种方法是使用名为 Faux-Columns 的技术。

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

更多信息请访问：

A List Apart: Articles: Faux Columns

Answer 8

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

这是一个易于使用的jQuery插件，您可以在父容器上使用，并且所有顶级子元素都调整到与最高元素相同的高度。

Answer 9

如果你真的想让一个div像表一样行事，你可以自定义css＆＃34; display＆＃34;的div。

容器div的

display：table

显示：table-cell ，内部div作为td

Answer 10

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;
}

用于表格

Answer 11

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

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

11 个答案: