logo标签列表

如何使并排的两个div元素保持相同的高度？

htmlcss
544

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

你希望如果其中一个变大了，另一个保持相同的高度尺寸吗？ - Wai Wong
一个示例，它不是一个解决方案，但可以在可编辑的环境中找到：http://jsfiddle.net/PCJUQ/ - MvanGeest
24个回答
6

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

只需将以下CSS添加到父级<div>中即可：

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

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

1
@TylerH但是asked编辑了他的问题并添加了“我希望两个框始终具有相同的大小，因此，如果其中一个由于放入文本而增长，则另一个应该增大以匹配高度。”这在已接受的答案中没有提到...我只是在这里做了补充。也许我应该在已接受的答案上进行评论？ - Hegwin
1
这是因为它已经被简单的CSS声明所覆盖，因此没有明确提到。打开答案的代码片段并将浏览器窗口调整大小，你会发现它们保持相同的大小。 - TylerH
1
即使被接受的答案使用了flexbox，但这个答案采用了不同的方法。align-items: stretch是让我在一个非常特殊的情况下解决问题的关键。 - BenoitLussier
“align-items: stretch;” 不是 flex 的默认值吗？ - madav
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>

3

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

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

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

这是工作的 jsfiddle 链接

要了解有关 flex 和父子 div 在 flex 内部行为的更多详细信息 - 我建议访问此链接：css-tricks

这个答案完全有效 - 我不知道为什么有人甚至没有尝试就对它进行了负评。 这里是工作的jsfiddle链接 https://jsfiddle.net/maani_77/6kp1g97z/1/ - Omair Munir
我给这个点了踩，因为它只是重复了许多答案。新的回答，特别是对于已经有很多现有答案的旧问题，应该注意提供新颖的解决方案，而不是重复现有的解决方案。 - TylerH
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;
}
2
这个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;            
}
1

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

1
如果两个<div>都有动态内容，这种方法就不起作用。我之所以这么说是因为如果<div class="right">有更多的内容，那么问题就出现了。 - Sarvap Praharanayuthan
1
我知道已经过了很长时间，但我还是分享我的解决方案。这是一个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>
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 方法。
1

我想要补充 Pavlo 所描述的很棒的 Flexbox 解决方案，就是在我的情况下，我有两个数据列表/列想要并排显示，它们之间只需要一点间距，在一个包含的 div 中水平居中。通过将另一个 div 嵌套在第一个（最左侧）flex:1 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>
0
这是一个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] );

}

};
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接