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

时间:2010-06-08 13:39:54

标签: html css css3 html-table flexbox

我有两个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>

24 个答案:

答案 0 :(得分:515)

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

答案 1 :(得分:141)

这是许多人遇到的常见问题,但幸运的是,像Ed Eliot's on his blog这样的聪明人已经在网上发布了他们的解决方案。

基本上你做的是通过添加padding-bottom: 100%使得两个div /列非常高,然后“欺骗浏览器”认为他们不是那么高{{1} }。 Ed Eliot在他的博客中更好地解释了这一点,其中还包括许多例子。

margin-bottom: -100%
.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

答案 2 :(得分:54)

这是一个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的Opera,以及来自版本8的IE。

答案 3 :(得分:37)

使用Javascript

使用jQuery,你可以用一个超级简单的单行脚本来完成它。

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

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

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

使用CSS

这有点儿有趣。该技术称为Faux Columns。或多或少,您实际上并未将实际高度设置为相同,但您需要装配一些图形元素,以使它们看起来相同的高度。

答案 4 :(得分:13)

我很惊讶没有人提到过(非常古老但可靠的)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>

答案 5 :(得分:11)

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

答案 6 :(得分:8)

您可以使用Faux Columns

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

仅适用于固定宽度的框。

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

答案 7 :(得分:5)

在搜索这个答案时,发现了这个帖子。我刚刚制作了一个小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>

答案 8 :(得分:4)

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

enter image description here

假设您有一个内部有两个div的容器,并且您希望两个div具有相同的高度。

您将在容器上设置“ 显示:弯曲 ”以及“ 对齐项目:拉伸 '

然后只需为孩子的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>

答案 9 :(得分:3)

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

只需将以下CSS添加到父display: -webkit-flex; display: flex; flex-direction: row; align-items: stretch; ,它就可以。

flex-direction: row

前两行声明它将显示为flexbox。 align-items: stretch告诉浏览器它的子项将显示在列中。并且SELECT user_id, state_code, address from UserAddress WHERE ((WHERE state_code = 'CA') AND (@user_id > 10)) OR ((WHERE address = 'HILLS') AND (@user_id <= 10)) 将满足所有子元素将延伸到其中一个元素变得更高的相同高度的要求。

答案 10 :(得分:2)

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

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

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

答案 11 :(得分:2)

如果你不介意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;
}

答案 12 :(得分:1)

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>

答案 13 :(得分:0)

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

答案 14 :(得分: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>

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

答案 15 :(得分:0)

Fiddle

HTML

ax = graph_by_common_users.plot(kind='barh', width=0.5, figsize=(10,20))
[label.set_rotation(25) for label in ax.get_xticklabels()]

rects = ax.patches 
labels = [int(round(graph_by_common_users.loc[i, y])) \
for y in graph_by_common_users.columns.tolist() \
for i in graph_by_common_users.index]

for rect, label in zip(rects, labels): 
    height = rect.get_height() 
    ax.text(rect.get_width()+20, rect.get_y() - 0.25 + rect.get_height(), label, fontsize=8)

    handles, labels = ax.get_legend_handles_labels()
    # sort both labels and handles by labels
    labels, handles = zip(*sorted(zip(labels, handles), key=lambda t: t[0]))
    ax.legend(handles, labels)   

CSS

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

答案 16 :(得分: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

答案 17 :(得分:-1)

使用Derek的答案(https://stackoverflow.com/a/2998087/2817442)我想到了他的代码的响应版本,当没有对div应用其他显式样式时,它应该可以工作(但是我对此可能是错的)。

$(".column").css('min-height', $("#referenceCloumn").height());
//And yes, we have to select the higher div, that is, in this case: #referenceCloumn
.column{
 /*only for the example*/
  border: 1px #000000 solid;
  max-width: 310px;
  margin: 0 8px;
  float:left;
   /*only for the example*/
  
  /*the necessary part*/ 
  display: inherit;
  /*the necessary part*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="theColumnToSet" class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non metus turpis. Curabitur sollicitudin nunc felis. Vestibulum vitae nibh tempus, imperdiet enim ut, convallis magna. Sed rutrum massa eu metus ornare, nec consectetur eros tristique. Curabitur aliquet nulla massa, eu volutpat magna finibus quis. Praesent tortor enim, vulputate a enim et, tincidunt commodo urna. Nulla hendrerit libero eget neque finibus, nec facilisis nisl dictum. Praesent at arcu porta, vehicula ex nec, maximus velit. Proin ac quam sed lectus tempus consequat. Duis egestas aliquam purus eu vehicula. Curabitur at placerat erat. Integer aliquet tortor ut justo vestibulum eleifend. Nulla vehicula mauris vel sem fermentum, auctor luctus tellus sagittis. Maecenas vel faucibus urna, nec elementum felis. Morbi nec facilisis nulla. 
</div>

<div id="referenceCloumn" class="column">
 Pellentesque ante metus, semper ut condimentum sit amet, euismod eget neque. Sed vulputate non libero a pulvinar. Sed non molestie nisl. Vestibulum quis ante sem. Duis commodo varius vestibulum. Ut efficitur commodo scelerisque. Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Praesent dignissim, risus at lobortis dictum, odio enim dictum felis, quis condimentum sem turpis quis ex. Aliquam scelerisque ornare malesuada.

Phasellus hendrerit consequat fringilla. Suspendisse faucibus quam turpis, pulvinar laoreet libero vehicula sit amet. Aliquam pretium gravida nibh, quis tempus dui cursus sit amet. Donec interdum purus a orci cursus, sed aliquam mauris facilisis. Donec vel gravida lorem, et convallis libero. Maecenas sed laoreet erat. Quisque cursus pretium bibendum. Vivamus vel diam in tellus maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam euismod iaculis ex non faucibus. Donec tincidunt arcu nisi, id ultricies ipsum vestibulum ut. Cras vulputate, enim sed varius cursus, lorem dui scelerisque lectus, quis accumsan nisi nisi quis leo. Sed sit amet orci hendrerit, auctor magna ut, vulputate tortor. Vivamus lobortis malesuada aliquet.

Etiam id sapien malesuada, lobortis lectus sed, ultrices arcu. Maecenas posuere molestie orci, a tincidunt erat consequat at. Sed in velit arcu. Vestibulum in ante non ex volutpat hendrerit a ut diam. Morbi dignissim id nibh in congue. Nunc auctor vel turpis in consectetur. Aliquam nec egestas urna, ut sagittis augue. Fusce eget neque erat. Donec quis lobortis libero, a sodales augue. Ut bibendum augue ac lacus volutpat sollicitudin. Morbi laoreet tempus ornare. Nam varius, neque sit amet tristique varius, quam tellus iaculis elit, ac posuere justo tellus non ipsum. Integer placerat vulputate purus et suscipit. Phasellus porta purus eget pulvinar ornare. 
</div>

答案 18 :(得分:-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 list of stuff]
        </div>
    </div>

    <div style="flex:1;padding-left:15px">
            [My Right-hand list of stuff]
    </div>
</div>

答案 19 :(得分:-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] );

}

};

答案 20 :(得分:-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');
});

我希望这适合你。

答案 21 :(得分:-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);

    });

答案 22 :(得分:-3)

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

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

答案 23 :(得分:-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>

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