我有两个div并排 . 我希望它们的高度相同，并且如果其中一个调整大小，则保持不变 . 虽然我无法想象这一点 . 想法？

为了澄清我令人困惑的问题，我希望两个盒子总是大小相同，所以如果因为文本被放入其中而增长，那么另一个应该增长以匹配高度 .

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

        Some content!

        Some content!

        Some content!

        Some content!

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

20 回答

142

Flexbox

使用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>

旧版浏览器可能需要前缀，请参阅browser support .

回复于 2024-05-04T09:55:07+08:00

如果你不介意其中一个 div 是一个主人并指示两个 div 的高度，那就是：

Fiddle

无论如何，右侧的 div 将扩展或挤压并溢出以匹配左侧 div 的高度 .

两个 div 必须是容器的直接子节点，并且必须在其中指定它们的宽度 .

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

回复于 2024-05-04T09:55:07+08:00

54
这是许多人遇到的常见问题，但幸运的是，一些聪明的头脑如Ed Eliot's on his blog已在网上发布了他们的解决方案 .

基本上你做的是通过添加一个 padding-bottom: 100% 然后"trick the browser"使得两个div /列非常高，认为它们使用 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>
```
回复于 2024-05-04T09:55:07+08:00

504

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

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

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

        Some content!

        Some content!

        Some content!

        Some content!

    </div>

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

</div>

这适用于所有版本的Firefox，Chrome和Safari，至少来自版本8的Opera，以及来自版本8的IE .

回复于 2024-05-04T09:55:07+08:00

36
使用Javascript

使用jQuery，你可以在一个超级简单的单行脚本中完成它 .
```
// HTML
<div id="columnOne">
</div>

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

// Javascript
$("#columnTwo").height($("#columnOne").height());
```
使用CSS

这有点儿有趣 . 该技术称为Faux Columns . 或多或少，您实际上并没有将实际高度设置为相同，但是您设置了一些图形元素，使它们看起来具有相同的高度 .
回复于 2024-05-04T09:55:07+08:00

-2

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

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

一般的想法是，具有 position: absolute; 的元素将位于具有 position: relative; 的最近父元素上 . 然后通过分配 top: 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>

回复于 2024-05-04T09:55:07+08:00

您可以使用Jquery的Equal Heights插件来完成，这个插件使得所有div都与其他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/

回复于 2024-05-04T09:55:07+08:00

3

你可以使用Faux Columns .

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

仅适用于固定宽度的盒子 .

经过充分测试，并在每个浏览器中正常工作 .

回复于 2024-05-04T09:55:07+08:00

刚刚在搜索这个答案时发现了这个帖子 . 我只是做了一个小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>

回复于 2024-05-04T09:55:07+08:00

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

只需将以下CSS添加到父亲 <div> ，它就可以了 .
```
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
```
前两行声明它将显示为flexbox . 并且 flex-direction: row 告诉浏览器它的子项将显示在列中 . 并且 align-items: stretch 将满足所有子元素将延伸到其中一个元素变得更高的相同高度的要求 .
回复于 2024-05-04T09:55:07+08:00

-2

我喜欢使用 pseudo elements 来实现这一目标 . 您可以将其用作内容的背景，并让它们填充空间 .

使用这些方法，您可以在列，边框等之间设置边距 .

.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>

回复于 2024-05-04T09:55:07+08:00

-1

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 
1.1
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 
1.1
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 
1.1
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>

回复于 2024-05-04T09:55:07+08:00

-4

你可以使用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

回复于 2024-05-04T09:55:07+08:00

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

--- HTML

<div class="custom-column">
    <div class="column-left">
        asd
        asd

        asd

    </div>
    <div class="column-right">
        asd
    </div>
</div>

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

        asd

    </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>

--- JQUERY

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

回复于 2024-05-04T09:55:07+08:00

Fiddle

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

回复于 2024-05-04T09:55:07+08:00

这是一个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] );

}

};

回复于 2024-05-04T09:55:07+08:00

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

    });

回复于 2024-05-04T09:55:07+08:00

我遇到了同样的问题所以我使用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');
});

我希望这适合你 .

回复于 2024-05-04T09:55:07+08:00

0

我最近遇到过这个，并不喜欢这些解决方案，所以我尝试了一下 .

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

回复于 2024-05-04T09:55:07+08:00

-3

<div>

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

Some content!

Some content!

Some content!

Some content!

Some content!


</div>

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

Some content!

</div>

</div>

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

回复于 2024-05-04T09:55:07+08:00

如何将两个并排的div保持相同的高度？

20 回答

Flexbox

使用Javascript

使用CSS

CSS网格方式

相关问题