我如何保持两个并排高度相同的div？
我有两个div并排。 我想他们的高度是相同的，如果他们中的一个resize，保持不变。 我无法弄清楚这一点。 想法？
为了弄清楚我这个令人困惑的问题，我希望两个盒子的大小始终相同，所以如果一个盒子因为放入文本而长大，另一个盒子的长度应该与高度相匹配。
<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）在他的博客上有一些聪明的头脑在网上发布了他们的解决scheme。
基本上你所做的是通过添加一个padding-bottom: 100% ，然后“欺骗浏览器”认为它们不是那么高，使用margin-bottom: -100%来使div /列非常高。 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* values来伪造它们），因为这是唯一一个“保留一堆元素同样的高度“被执行。
<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的所有版本，至less版本8的Opera以及版本8的IE。
使用Javascript
使用jQuery，你可以在一个超级简单的单行脚本中做到这一点。
// HTML <div id="columnOne"> </div> <div id="columnTwo"> </div> // Javascript $("#columnTwo").height($("#columnOne").height());
使用CSS
这有点儿有趣 这种技术被称为仿列 。 或多或less，你实际上并没有把实际的高度设置成相同的，但你可以调整一些graphics元素，使它们看起来相同的高度。
我很惊讶，没有人提到（非常古老但可靠的）绝对列技术： http : //24ways.org/2008/absolute-columns/
在我看来，它比虚拟列和一个真正的布局的技术要好得多。
总的想法是，一个元素的position: absolute; 将对最近的具有position: relative;父元素进行position: relative; 。 然后通过指定top: 0px;然后伸展一列来填充100％的高度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的Equal Heights插件来完成，这个插件使得所有的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.
链接在这里
你可以使用仿列 。
基本上它使用一个包含DIV的背景图像来模拟两个等高DIV。 使用这种技术也允许你添加阴影，圆angular，自定义边框或其他时髦的模式到你的容器。
只能使用固定宽度的框。
经过良好的testing，并在每个浏览器正常工作。
刚刚发现这个线程，同时寻找这个答案。 我只是做了一个小的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>
如果你不介意其中一个div是主人并且为这两个div的高度指定的话，那就是：
小提琴
无论如何，右边的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; }
我喜欢用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>
你可以使用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
我知道它已经很长时间了，但我仍然分享我的解决scheme。 这是一个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] ); }
};
这个问题在6年前就被问到了，但现在仍然值得用flexbox布局给出一个简单的答案。
只需将下面的CSS添加到父<div> ，它就可以工作。
display: -webkit-flex; display: flex; flex-direction: row; align-items: stretch;
前两行声明它将显示为flexbox。 并且flex-direction: row告诉浏览器它的子将显示在列中。 align-items: stretch将满足所有的孩子元素将伸展到相同的高度，其中一个更高的要求。
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); });
我有同样的问题，所以我创build了这个小函数使用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'); });
我希望这对你有用。
我最近遇到这个，并没有真正喜欢的解决scheme，所以我试着尝试。
.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>
我在这里做的是把高度改成最小高度，并给它一个固定值。 如果其中一个正在resize，另一个将保持相同的高度。 不知道这是你想要的
