511

我有两个并排的 div 元素。我希望它们的高度相同，并且如果其中一个调整大小时保持不变。如果一个增长是因为文本被放入其中，另一个应该增长以匹配高度。不过我想不出来这个。有任何想法吗？

<div style="overflow: hidden">
    <div style="
        border: 1px solid #cccccc;
        float: left;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    ">
        Some content!<br />
        Some content!<br />
        Some content!<br />
        Some content!<br />
        Some content!<br />
    </div>

    <div style="
        border: 1px solid #cccccc;
        float: left;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    ">
        Some content!
    </div>
</div>

4

24 回答 24

689

弹性盒

使用 flexbox，它是一个单一的声明：

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

旧浏览器可能需要前缀，请参阅浏览器支持。

于 2013-12-18T22:13:05.797 回答
157

这是很多人都遇到过的常见问题，但幸运的是，像Ed Eliot 这样的聪明人在他的博客上已经在网上发布了他们的解决方案。

基本上，您所做的是通过添加 a使两个 div/列都非常padding-bottom: 100%高，然后“欺骗浏览器”认为它们没有那么高使用margin-bottom: -100%. Ed Eliot 在他的博客上对此进行了更好的解释，其中还包括许多示例。

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}
<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>

于 2010-06-08T13:47:44.810 回答
55

这是 CSS 从未真正有任何解决方案的领域——您只能使用<table>标签（或使用 CSSdisplay:table*值伪造它们），因为这是唯一实现“使一堆元素保持相同高度”的地方。

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

这适用于所有版本的 Firefox、Chrome 和 Safari、至少从版本 8 开始的 Opera，以及从版本 8 开始的 IE。

于 2010-06-08T14:02:23.517 回答
48

使用 jQuery

使用 jQuery，您可以在一个超级简单的单行脚本中完成它。

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

使用 CSS

这有点有趣。该技术称为仿列。或多或少您实际上并没有将实际高度设置为相同，但是您装配了一些图形元素，使它们看起来具有相同的高度。

于 2010-06-08T14:14:15.753 回答
17

我很惊讶没有人提到（非常古老但可靠的）绝对列技术：http: //24ways.org/2008/absolute-columns/

在我看来，它远远优于 Faux Columns 和 One True Layout 的技术。

一般的想法是，带有 的元素position: absolute;将相对于最近的具有 的父元素定位position: relative;。然后，您可以通过同时分配 atop: 0px;和bottom: 0px;（或您实际需要的任何像素/百分比）来拉伸一列以填充 100% 的高度。这是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container
      {
        position: relative;
      }

      #left-column
      {
        width: 50%;
        background-color: pink;
      }

      #right-column
      {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 50%;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <ul>
          <li>Foo</li>
          <li>Bar</li>
          <li>Baz</li>
        </ul>
      </div>
      <div id="right-column">
        Lorem ipsum
      </div>
    </div>
  </body>
</html>
于 2013-02-06T02:21:06.237 回答
14

使用 CSS Flexbox 和 min-height 对我有用

在此处输入图像描述

假设您有一个容器，里面有两个 div，并且您希望这两个 div 具有相同的高度。

您可以在容器上设置“ display: flex ”以及“ align-items: stretch ”

然后给孩子 div 一个100%的“最小高度”

请参阅下面的代码

.container {
  width: 100%;
  background: linear-gradient(red,blue);
  padding: 1em;
  /* important */
  display: flex;
  /* important */
  align-items: stretch;
  justify-content: space-around;
}

.child {
  width: 100%;
  background: white;
  color: grey;
  margin: 0 .5em;
  padding: .5em;
  /* important */
  min-height: 100%;
}
<div class="container">
  
  <div class="child"><p>This is some text to fill the paragraph</p></div>
  <div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></div>
  
</div>

于 2020-02-12T11:04:10.313 回答
11

您可以使用 Jquery 的 Equal Heights Plugin 来完成，该插件使所有 div 的高度与其他的完全相同。如果其中一个增长，另一个也会增长。

这里是一个实现示例

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

链接在这里

http://www.cssnewbie.com/equalheights-jquery-plugin/

于 2010-06-08T14:03:25.327 回答
9

刚刚在寻找这个答案时发现了这个线程。我刚刚做了一个小的 jQuery 函数，希望这会有所帮助，就像一个魅力：

JAVASCRIPT

var maxHeight = 0;
$('.inner').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">
    <div class="inner">
        Content in here
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        More content in here
    </div>
</div>
于 2013-12-05T15:34:53.737 回答
8

您可以使用Faux Columns。

基本上，它使用包含 DIV 中的背景图像来模拟两个等高的 DIV。使用此技术还允许您向容器添加阴影、圆角、自定义边框或其他时髦图案。

但仅适用于固定宽度的框。

经过良好测试并在每个浏览器中正常工作。

于 2010-06-08T16:24:38.477 回答
6

这个问题是 6 年前提出的，但现在仍然值得用flexbox布局给出一个简单的答案。

只需将以下 CSS 添加到 parent 即可<div>。

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

前两行声明它将显示为 flexbox。并flex-direction: row告诉浏览器其子项将显示在列中。并且align-items: stretch将满足所有子元素将拉伸到相同高度的要求，其中一个元素变得更高。

于 2016-11-17T08:34:59.347 回答
6

CSS网格方式

这样做的现代方法（也避免必须<div class="row"></div>在每两个项目周围声明一个 -wrapper）将使用 CSS 网格。这也使您可以轻松控制项目行/列之间的间隙。

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.grid-item img {
  max-width: 100%;
}
<div class="grid-container">
  <div class="grid-item">1 <br />1.1<br />1.1.1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    3.1
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">5 <br />1.1<br />1.1.1</div>
  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
    6.1</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9 <br />1.1<br />1.1.1</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    11.1
  </div>
  <div class="grid-item">12</div>
</div>

于 2018-06-29T10:03:46.027 回答
3

我喜欢使用伪元素来实现这一点。您可以将其用作内容的背景并让它们填充空间。

使用这些方法，您可以设置列、边框等之间的边距。

.wrapper{
  position: relative;
  width: 200px;
}
.wrapper:before,
.wrapper:after{
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border: 2px solid blue;
  position: absolute;
  top: 0;
}
.wrapper:before{
  left: 0;
  background-color: red;
}
.wrapper:after{
  right: 0;
  background-color: green;
}

.div1, .div2{
  width: 40%;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.div1{
  margin-right: 20%;
}
<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>

于 2016-12-15T10:40:21.590 回答
2

如果您不介意其中一个divs 是大师并指定两个divs 的高度，则有：

小提琴

无论如何，div右边的会扩展或挤压&溢出以匹配div左边的高度。

两个divs 都必须是容器的直接子级，并且必须在其中指定它们的宽度。

相关CSS：

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}
于 2014-05-23T06:27:32.220 回答
2

小提琴_

HTML

<div class="container">

    <div class="left-column">

    </div>

    <div class="right-column">
        <h1>Hello Kitty!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    </div>

</div>

CSS

.container {
    float: left;
    width: 100%;
    background-color: black;
    position: relative;
    left: 0;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.left-column {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    background: wheat;
}

.right-column {
    float: right;
    width: 70%;
    position: relative;
    padding: 0;
    margin: 0;
    background: rebeccapurple;            
}
于 2016-03-30T15:18:26.920 回答
1

我已经尝试了上面提到的几乎所有方法，但是 flexbox 解决方案无法在 Safari 上正常工作，并且网格布局方法在旧版本的 IE 上也无法正常工作。

该解决方案适用于所有屏幕并且跨浏览器兼容：

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

上面的方法将等于单元格的高度，对于手机或平板等较小的屏幕，我们可以使用@media上面提到的方法。

于 2019-04-12T17:54:41.750 回答
1

我只是想添加到 Pavlo 描述的出色的 Flexbox 解决方案，在我的例子中，我有两个数据列表/列，我想并排显示它们之间只有一点间距，水平居中在一个封闭的div。通过在第一个（最左边的） flex:1 div 中嵌套另一个 div 并将其浮动到右侧，我得到了我想要的。我找不到任何其他方法可以在所有视口宽度上取得一致的成功：

<div style="display: flex;">
    <div style="flex: 1; padding-right: 15px;">
        <div style="float: right">
            <!-- My Left-hand side list of stuff -->
        </div>
    </div>

    <div style="flex: 1; padding-left: 15px;">
        <!-- My Right-hand side list of stuff -->
    </div>
</div>
于 2020-12-05T08:25:33.703 回答
0

您可以使用 jQuery 轻松实现此目的。

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {
    var leftHeight = $('.left').height();
    $('.right').css({'height':leftHeight});
});

HTML

   <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
   </div>
   <div class="right">
    <p>Lorem ipsum dolor sit amet.</p>
   </div>

你需要包括jQuery

于 2010-06-08T14:14:03.380 回答
0

我知道这已经很长时间了，但无论如何我都会分享我的解决方案。这是一个 jQuery 技巧。

--- HTML

<div class="custom-column">
    <div class="column-left">
        asd
        asd<br/>
        asd<br/>
    </div>
    <div class="column-right">
        asd
    </div>
</div>

<div class="custom-column">
    <div class="column-left">
        asd
    </div>
    <div class="column-right">
        asd
        asd<br/>
        asd<br/>
    </div>
</div>

---- CSS

<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
    .column-left { float:left; width:25%; background:#CCC; }
    .column-right { float:right; width:75%; background:#EEE; }
</style>

--- 查询

<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $balancer = function() {
        $('.custom-column').each(function(){
            if($('.column-left',this).height()>$('.column-right',this).height()){
                $('.column-right',this).height($('.column-left',this).height())
            } else {
                $('.column-left',this).height($('.column-right',this).height())
            }

        });

    }
    $balancer();
    $(window).load($balancer());
    $(window).resize($balancer());

});
</script>
于 2014-11-17T13:47:43.487 回答
-1

这是一个 jQuery 插件，它为同一行上的所有元素设置相等的高度（通过检查元素的 offset.top）。因此，如果您的 jQuery 数组包含来自多行的元素（不同的 offset.top），则每一行将有一个单独的高度，基于该行上具有最大高度的元素。

jQuery.fn.setEqualHeight = function(){

var $elements = [], max_height = [];

jQuery(this).css( 'min-height', 0 );

// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){ 

    var offset_top = jQuery(el).offset().top;
    var el_height = jQuery(el).css('height');

    if( typeof $elements[offset_top] == "undefined" ){
        $elements[offset_top] = jQuery();
        max_height[offset_top] = 0;
    }

    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );

    if( parseInt(el_height) > parseInt(max_height[offset_top]) )
        max_height[offset_top] = el_height;

});

// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){

    if( jQuery($elements[offset_top]).length > 1 )
        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );

}

};

于 2015-03-31T07:55:41.847 回答
-1

我参加这个聚会很晚了——但如果你还在寻找这个答案，那么这里很容易尝试。

第 1 步：将父 div 的样式设置为display: flex

第 2 步：将您的子 div 样式设置为flex: 1和height:100%

说明： flex: 1将 设置flex-grow为 1，这会将容器的剩余空间平均分配给所有子项。

这是有效的jsfiddle链接

有关 flex 和父子 div 在 flex 中的行为方式的更多详细信息 - 我建议您访问此链接：css-tricks

于 2022-02-22T04:38:06.533 回答
-2 
    var numexcute = 0;
    var interval;
    $(document).bind('click', function () {

        interval = setInterval(function () {
            if (numexcute >= 20) {
                clearInterval(interval);
                numexcute = 0;
            }
            $('#leftpane').css('height', 'auto');
            $('#rightpane').css('height', 'auto');
            if ($('#leftpane').height() < $('#rightpane').height())
                $('#leftpane').height($('#rightpane').height());
            if ($('#leftpane').height() > $('#rightpane').height())

                $('#rightpane').height($('#leftpane').height());
            numexcute++;
        }, 10);

    });
于 2013-07-05T22:05:26.043 回答
-2

我遇到了同样的问题，所以我使用 jquery 创建了这个小函数，因为 jquery 现在是每个 Web 应用程序的一部分。

function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount > 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}

您可以在页面就绪事件上调用此函数

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

我希望这对你有用。

于 2013-11-21T16:18:09.327 回答
-3

我最近遇到了这个并且不太喜欢这些解决方案，所以我尝试了试验。

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

于 2013-11-27T03:19:08.250 回答
-4 
<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

我在这里所做的是将高度更改为最小高度并给它一个固定值。如果其中一个正在调整大小，另一个将保持相同的高度。不确定这是否是您想要的

于 2010-06-08T13:53:35.653 回答