我如何保持两个并排的divs相同的高度？

StackOverflow https://stackoverflow.com/questions/2997767

题

我有两个divs并排。我希望它们的高度相同，如果其中一个调整大小，请保持不变。我不知道这个。想法？

为了澄清我令人困惑的问题，我希望两个盒子总是相同的尺寸，因此，如果将一个文本放入其中，则一个框，另一个盒子应该成长以匹配高度。

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

有帮助吗？

解决方案

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>

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

其他提示

这是许多人遇到的常见问题，但幸运的是像 埃德·艾略特（Ed Eliot）在他的博客上 已经在线发布了他们的解决方案。

基本上，您要做的是两个divs/linters 非常 高个子 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>

这是CSS从未真正拥有任何解决方案的领域 - 您不愿使用 <table> 标签（或使用CSS伪造它们 display: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的歌剧以及IE版本8版中都起作用。

使用jQuery

使用jQuery，您可以在超级简单的单行字样中进行。

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

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

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

使用CSS

这更有趣。该技术称为 人造柱. 。或多或少您实际上并未设置 实际的 相同的高度，但是您要钻一些图形元素，所以它们 看 相同的高度。

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

我认为，它均优于人造柱和一个真正的布局技术。

一般的想法是与 position: absolute; 将对最近的父元素的定位 position: relative;. 。然后，您通过分配两个 top: 0px; 和 bottom: 0px; （或实际需要的任何像素/百分比。）这是一个示例：

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

您可以使用jQuery的相等高度插件来完成，此插件使所有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/

您可以使用 人造柱.

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

不过，只能与固定宽度盒一起使用。

经过良好的测试并在每个浏览器中适当工作。

只是在搜索这个答案时发现了这个线程。我刚刚发挥了一个小的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>

这个问题是在6年前提出的，但仍然值得一个简单的答案 Flexbox 如今布局。

只需将以下CSS添加到父亲 <div>, ，它将起作用。

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

前两行声明将显示为Flexbox。和 flex-direction: row 告诉浏览器，其孩子将在列中显示。和 align-items: stretch 将满足所有子女元素将延伸至相同高度的要求，其中一个人会变得更高。

如果您不介意其中之一 div成为主人，并决定两者的身高 div有这样的：

小提琴

无论如何， 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;
}

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

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

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

CSS网格方式

这样做的现代方式（这也避免了必须声明 <div class="row"></div>- 每两个项目周围包装）是使用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>

我尝试了上面几乎所有提到的方法，但是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 上面提到的方法。

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

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

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

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

这 小提琴

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

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

}

};

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

    });

我遇到了相同的问题，因此我使用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');
});

我希望这对您有用。

我最近遇到了这个问题，并不真正喜欢解决方案，所以我尝试了实验。

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top