如何使用HTML / CSS实现相同的高度div（并排放置）？

Question

我在容器内有两个div。 一个在左边，一个在右边，并排。 即使它们具有不同的内容，我怎样才能使每个人具有相同的高度。

例如，右侧div有很多内容，并且是左侧div的高度的两倍，如何使左侧div伸展到右侧div的相同高度？

是否有一些JavaScript（jQuery）代码来实现这一目标？

Answer 1

你可以使用jQuery，但有更好的方法来做到这一点。

这类问题出现了很多，一般有3个答案......

1.使用CSS

这是“最好”的方法，因为它是最语义纯粹的方法（没有诉诸JS，它有自己的问题）。 最好的方法是使用display: table-cell和相关值。 您也可以尝试使用虚假背景技术（可以使用CSS3渐变）。

2.使用表格

这看起来效果很好，但却牺牲了非语义布局。 你也会引起纯粹主义者的轰动。 我几乎避免使用表格，你也应该这样做。

3.使用jQuery / JavaScript

这有利于拥有最多的语义标记，除非禁用JS，否则您将无法获得所需的效果。

Answer 2

这是使用纯CSS做到这一点的方法，但是，正如您在示例中所注意到的（在IE 7和Firefox中有效），边界可能很难 - 但它们并非不可能，所以这一切都取决于您想要的做。 此示例假定body> wrapper> content container>第1列和第2列的相当常见的CSS结构。

关键是底部边距及其取消填充。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal Height Columns</title>
<style type="text/css">
<!--
* { padding: 0; margin: 0; }
#wrapper { margin: 10px auto; width: 600px; }
#wrapper #main_container { width: 590px; padding: 10px 0px 10px 10px; background: #CCC; overflow: hidden; border-bottom: 10px solid #CCC; }
#wrapper #main_container div { float: left; width: 263px; background: #999; padding: 10px; margin-right: 10px; border: 1px solid #000; margin-bottom: -1000px; padding-bottom: 1000px; }
#wrapper #main_container #right_column { background: #FFF; }
-->
</style>
</head>

<body>
<div id="wrapper">
    <div id="main_container">
        <div id="left_column">
            <p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
        </div><!-- LEFT COLUMN -->
        <div id="right_column">
          <p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
          <p>&nbsp;</p>
          <p>For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?</p>
          <p>&nbsp;</p>
          <p>Is there some JavaScript (jQuery) code to accomplish this?</p>
        </div><!-- RIGHT COLUMN -->
    </div><!-- MAIN CONTAINER -->
</div><!-- WRAPPER -->
</body>
</html>

这就是它的样子：

在此输入图像描述

Answer 3

你可以使用js：

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>

Answer 4

我已经看到很多尝试这样做，虽然没有人满足我的OCD需求。 你可能需要花一点时间来解决这个问题，尽管它比使用JavaScript更好。

已知的缺点：

在具有动态宽度的容器的情况下，不支持多个元素行。
在IE6中不起作用。

基地：

基地布局

red是（辅助）容器，用于为内容设置边距。
绿色是position: relative; overflow: hidden position: relative; overflow: hidden和（可选，如果你想让列居中） text-align: center; font-size: 0; line-height: 0; text-align: center; font-size: 0; line-height: 0;
蓝色 display: block; float: left; display: block; float: left; 或（可选，如果您希望列居中） display: inline-block; vertical-align: top; display: inline-block; vertical-align: top;

到目前为止没有什么特别的。 无论蓝色元素具有什么内容，您都需要添加一个绝对定位的元素（黄色 ;请注意，此元素的z-index必须低于蓝色框的实际内容），并使用此元素并设置为top: 0; bottom: 0; top: 0; bottom: 0; （不要设置左或右位置）。

绝对的基础

现在你所有的元素都有相同的高度。 对于大多数布局，这已经足够了。 我的场景需要动态内容后跟静态内容，其中静态内容必须在同一行。

在此输入图像描述

要实现此目的，您需要将padding-bottom （ 深绿色 ）eq添加到蓝色元素的固定高度内容。

在此输入图像描述

然后在黄色元素内创建另一个绝对定位（ left: 0; bottom: 0; ）元素（ 深蓝色 ）。

在此输入图像描述

据说，如果这些框（黄色）必须是活动的超链接，并且您有任何想要应用于原始蓝框的样式，那么您将使用相邻的兄弟选择器：

yellow:hover + blue {}

这是一个代码和演示：

HTML：

<div id="products">
    <ul>
        <li class="product a">
            <a href="">
                <p class="name">Ordinary product description.</p>
                <div class="icon-product"></div>
            </a>
            <p class="name">Ordinary product description.</p>
        </li>
        <li class="product b">
            <a href="">
                <p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
                <div class="icon-product"></div>
            </a>
            <p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
        </li>
        <li class="product c">
            <a href="">
                <p class="name">Another ordinary product description.</p>
                <div class="icon-product"></div>
            </a>
            <p class="name">Another ordinary product description.</p>
        </li>
    </ul>
</div>

SCSS /减：

#products { 
    ul { position: relative; overflow: hidden; text-align: center; font-size: 0; line-height: 0;  padding: 0; margin: 0;
        li { display: inline-block; vertical-align: top; width: 130px; padding: 0 0 130px 0; margin: 0; }
    }

    li {
        a { display: block; position: absolute; width: 130px; background: rgba(255,0,0,.5); z-index: 3; top: 0; bottom: 0;
            .icon-product { background: #ccc; width: 90px; height: 90px; position: absolute; left: 20px; bottom: 20px; }
            .name { opacity: 1; }
        }

        .name { position: relative; margin: 20px 10px 0; font-size: 14px; line-height: 18px; opacity: 0; }

        a:hover {
            background: #ddd; text-decoration: none;

            .icon-product { background: #333; }
        }
    }
}

请注意，该演示使用的是一种涉及数据复制的解决方法来修复z-index 。 或者，您可以使用pointer-events: none和IE的任何解决方案。

Answer 5

这是一个非常简单的解决方案，具有短css显示：table

<div id="main" class="_dt-no-rows">
  <div id="aside" contenteditable="true">
    Aside
    <br>
    Here's the aside content
  </div>
  <div id="content" contenteditable="true">
    Content
    <br>
    geht's pellentesque wurscht elementum semper tellus s'guelt Pfourtz !. gal hopla
    <br>
    TIP : Just clic on this block to add/remove some text
  </div>
</div>

这是css

#main {
 display: table;
 width: 100%;
}
#aside, #content {
  display: table-cell;
  padding: 5px;
}
#aside {
  background: none repeat scroll 0 0 #333333;
  width: 250px;
}
#content {
background: none repeat scroll 0 0 #E69B00;
}

它看起来像这样

在此输入图像描述

Answer 6

好吧，我不做大量的jQuery，但在CSS / Javascript世界中我只会使用对象模型并编写如下语句：

if(leftDiv.style.height > rightDive.style.height)
   rightDiv.style.height = leftDiv.style.height;
else
   leftDiv.style.height = rightDiv.style.height)

Answer 7

还有一个名为equalHeights的jQuery插件，我已经使用了一些成功。

我不确定我使用的那个是上面提到的灯丝组中的一个，或者它是否是第一个google结果的那个 ...无论哪种方式，jquery插件可能是最简单，最灵活的方式走。

Answer 8

虽然许多人不同意使用javascript这种类型的东西，这里有一个方法，我曾经使用javascript单独实现这一点：

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

“left”和“right”是两个div标签的id。

Answer 9

这是我在普通javascript中使用的：

看起来很长，但非常简单！

function equalizeHeights(elements){
    //elements as array of elements (obtain like this: [document.getElementById("domElementId"),document.getElementById("anotherDomElementId")]

    var heights = [];
    for (var i=0;i<elements.length;i++){
        heights.push(getElementHeight(elements[i],true));
    }

    var maxHeight =  heights[biggestElementIndex(heights)];

    for (var i=0;i<elements.length;i++){
        setElementHeight(elements[i],maxHeight,true);
    }
}

function getElementHeight(element, isTotalHeight){
    // isTotalHeight triggers offsetHeight
    //The offsetHeight property is similar to the clientHeight property, but it returns the height including the padding, scrollBar and the border.
    //http://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript
    {
        isTotalHeight = typeof isTotalHeight !== 'undefined' ? isTotalHeight : true;
    }

    if (isTotalHeight){
        return  element.offsetHeight;
    }else{
        return element.clientHeight;
    }
}

 function setElementHeight(element,pixelHeight, setAsMinimumHeight){

    //setAsMinimumHeight: is set, we define the minimum height, so it can still become higher if things change...
    {
        setAsMinimumHeight = typeof setAsMinimumHeight !== 'undefined' ? setAsMinimumHeight : false;
    }
    var heightStr = "" + pixelHeight + "px";
    if (setAsMinimumHeight){
        element.style.minHeight = heightStr; // pixels
    }else{
        element.style.height = heightStr; // pixels
    }
}

 function biggestElementIndex(arr){
    //http://stackoverflow.com/questions/11301438/return-index-of-greatest-value-in-an-array
    var max = arr[0];
    var maxIndex = 0;

    for (var i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
            maxIndex = i;
            max = arr[i];
        }
    }
    return maxIndex;
}

Answer 10

我同意最初的答案，但是使用equal_heights（）方法的JS解决方案在某些情况下不起作用，假设您的产品彼此相邻。 如果您只将它应用于父容器，则它们的高度相同但产品名称部分可能会有所不同，如果一个不适合两行，这是我建议在下面使用的地方

https://jsfiddle.net/0hdtLfy5/3/

function make_children_same_height(element_parent, child_elements) {
    for (i = 0; i < child_elements.length; i++) {
    var tallest = 0;
    var an_element = child_elements[i];
    $(element_parent).children(an_element).each(function() {
      // using outer height since that includes the border and padding
      if(tallest < $(this).outerHeight() ){
        tallest = $(this).outerHeight();
      }
    });

    tallest = tallest+1; // some weird shit going on with half a pixel or something in FF and IE9, no time to figure out now, sowwy, hence adding 1 px
    $(element_parent).children(an_element).each(function() {
        $(this).css('min-height',tallest+'px');
    });
  }
}

Answer 11

在jquery文档就绪函数中使用它。 考虑到有两个div具有id“left”和“right”。

var heightR = $("#right").height();
var heightL = $("#left").height();

if(heightL > heightR){
    $("#right").css({ height: heightL});
} else {
    $("#left").css({ height: heightR});
}

如何使用HTML / CSS实现相同的高度div（并排放置）？

问题描述

11 个解决方案

解决方案1
17 已采纳 2009-06-29 01:30:08

1.使用CSS

2.使用表格

3.使用jQuery / JavaScript

解决方案2
11 2009-06-29 17:19:14

解决方案3
4 2013-09-17 22:24:10

解决方案4
3 2013-04-17 12:29:37

解决方案5
1 2013-07-08 10:10:00

解决方案6
0 2009-06-29 01:29:57

解决方案7
0 2009-06-29 03:46:28

解决方案8
0 2014-11-14 10:02:44

解决方案9
0 2015-06-04 18:56:29

解决方案10
0 2015-12-31 17:51:31

解决方案11
0 2012-03-27 23:15:12

如何使用HTML / CSS实现相同的高度div（并排放置）？

问题描述

11 个解决方案

解决方案1 17 已采纳 2009-06-29 01:30:08

1.使用CSS

2.使用表格

3.使用jQuery / JavaScript

解决方案2 11 2009-06-29 17:19:14

解决方案3 4 2013-09-17 22:24:10

解决方案4 3 2013-04-17 12:29:37

解决方案5 1 2013-07-08 10:10:00

解决方案6 0 2009-06-29 01:29:57

解决方案7 0 2009-06-29 03:46:28

解决方案8 0 2014-11-14 10:02:44

解决方案9 0 2015-06-04 18:56:29

解决方案10 0 2015-12-31 17:51:31

解决方案11 0 2012-03-27 23:15:12

解决方案1
17 已采纳 2009-06-29 01:30:08

解决方案2
11 2009-06-29 17:19:14

解决方案3
4 2013-09-17 22:24:10

解决方案4
3 2013-04-17 12:29:37

解决方案5
1 2013-07-08 10:10:00

解决方案6
0 2009-06-29 01:29:57

解决方案7
0 2009-06-29 03:46:28

解决方案8
0 2014-11-14 10:02:44

解决方案9
0 2015-06-04 18:56:29

解决方案10
0 2015-12-31 17:51:31

解决方案11
0 2012-03-27 23:15:12