как мне сохранить два соседних элемента одинаковой высоты?

<p>у меня есть два div рядом. я бы хотел, чтобы высота их была одинаковой, и оставалась такой же, если один из них изменяет размеры. я не могу понять это, хотя идеи?</p><p>чтобы прояснить мой запутанный вопрос, я бы хотел, чтобы оба блока всегда были одинакового размера, поэтому, если один из них увеличивается, потому что в него помещается текст, другой должен расти в соответствии с высотой.</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre></div> </div>

<h1>flexbox</h1><p>с flexbox это одно объявление:</p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.row { display: flex; /* equal height of the children */ } .col { flex: 1; /* additionally, equal width */ padding: 1em; border: solid; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre></div> </div><p>префиксы могут потребоваться для старых браузеров, см. <a href="http://caniuse.com/#feat=flexbox">поддержка браузера</a> .</p>

<p>это распространенная проблема, с которой многие сталкивались, но, к счастью, некоторые умные люди вроде <a href="https://web.archive.org/web/http://www.ejeliot.com/blog/61">эд элиот в своем блоге</a> разместили свои решения в интернете.</p><p>по сути, вы делаете оба элемента div/column <em> очень </em> высокими, добавляя <code>padding-bottom: 100%</code>, а затем "обманываете браузер", думая, что они не такие высокие, используя <code>margin-bottom: -100%</code>. это лучше объяснил эд элиот в своем блоге, который также включает в себя множество примеров.</p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.container { overflow: hidden; } .column { float: left; margin: 20px; background-color: grey; padding-bottom: 100%; margin-bottom: -100%; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre></div> </div>

<p>это область, где у css никогда не было никаких решений - вы можете использовать теги <code><table></code> (или подделывать их, используя значения css <code>display:table*</code>), так как это единственное место, где "держать группу элементов одинаковой высоты" было реализованы.</p><pre><code><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> </code></pre><p>это работает во всех версиях firefox, chrome и safari, opera по крайней мере из версии 8 и в ie из версии 8.</p>

<p>я удивлен, что никто не упомянул (очень старый, но надежный) метод absolute columns: <a href="http://24ways.org/2008/absolute-columns/">http://24ways.org/2008/absolute-columns/</a> </p><p>на мой взгляд, он намного превосходит метод faux columns и метод one true layout.</p><p>общая идея заключается в том, что элемент с <code>position: absolute;</code> будет располагаться напротив ближайшего родительского элемента, который имеет <code>position: relative;</code>. затем вы растягиваете столбец, чтобы заполнить 100% высоты, присваивая <code>top: 0px;</code> и <code>bottom: 0px;</code> (или любые пиксели/проценты, которые вам действительно нужны.) вот пример:</p><pre><code><!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> </code></pre>

<p>вы можете использовать плагин jquery equal heights, чтобы выполнить, этот плагин делает все div точно такой же высоты, как и другие. если один из них растет, а другой тоже будет расти.</p><p>вот пример реализации</p><pre><code>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. </code></pre><p>вот ссылка</p><p> <a href="http://www.cssnewbie.com/equalheights-jquery-plugin/">http://www.cssnewbie.com/equalheights-jquery-plugin/</a> </p>

<p>вы можете использовать <a href="http://www.alistapart.com/articles/fauxcolumns/">faux columns</a> .</p><p>в основном он использует фоновое изображение в div, содержащем div, для имитации двух div одинаковой высоты. использование этой техники также позволяет вам добавлять тени, скругленные углы, пользовательские границы или другие необычные узоры в ваши контейнеры.</p><p>работает только с коробками фиксированной ширины.</p><p>хорошо протестировано и правильно работает в каждом браузере.</p>

<p>этот вопрос задавался 6 лет назад, но все же стоит дать простой ответ с <em>flexbox</em> layout в наши дни.</p><p>просто добавьте следующий css к отцу <code><div></code>, он будет работать.</p><pre><code>display: -webkit-flex; display: flex; flex-direction: row; align-items: stretch; </code></pre><p>первые две строки объявляют, что это будет отображаться как flexbox. и <code>flex-direction: row</code> сообщает браузерам, что его дочерние элементы будут отображаться в столбцах. и <code>align-items: stretch</code> будет соответствовать требованию, чтобы все дочерние элементы растянулись до одинаковой высоты, если один из них станет выше.</p>

<p>если вы не возражаете против того, чтобы один из <code>div</code>s был мастером и определял высоту для обоих <code>div</code>s, есть следующее:</p><p> <a href="http://jsfiddle.net/msgrf/"><strong> скрипки </strong></a> </p><p>независимо от того, что <code>div</code> справа будет расширяться или сжиматься и переполняться, чтобы соответствовать высоте <code>div</code> слева.</p><p>оба <code>div</code>s должны быть непосредственными дочерними элементами контейнера и должны указывать их ширину в нем.</p><p>соответствующий css:</p><pre class="lang-css prettyprint-override"><code>.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; } </code></pre>

<p>мне нравится использовать псевдоэлементы для достижения этой цели. вы можете использовать его в качестве фона содержимого и позволить им заполнить пространство.</p><p>при таком подходе вы можете устанавливать поля между столбцами, границами и т.д.</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="wrapper"> <div class="div1">content content content content content content content content content </div><div class="div2">other</div> </div></code></pre></div> </div>

<p>я испробовал почти все упомянутые выше методы, но решение flexbox не будет работать правильно с safari, а методы компоновки сетки не будут работать правильно с более старыми версиями ie.</p><p>это решение подходит для всех экранов и совместимо с различными браузерами:</p><pre class="lang-css prettyprint-override"><code>.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;} } </code></pre><p>вышеупомянутый метод будет равен высоте ячеек, и для меньших экранов, таких как мобильный телефон или планшет, мы можем использовать метод <code>@media</code>, упомянутый выше.</p>

<h1>css сетка</h1><p>современный способ сделать это (который также избавляет от необходимости объявлять обертку <code><div class="row"></div></code>- вокруг каждых двух элементов) - это использовать css-сетку. это также дает вам возможность легко контролировать промежутки между строками/столбцами вашего элемента.</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre></div> </div>

<p>вы можете использовать jquery для достижения этой цели легко.</p><p>css</p><pre><code>.left, .right {border:1px solid #cccccc;} </code></pre><p>jquery</p><pre><code>$(document).ready(function() { var leftheight = $('.left').height(); $('.right').css({'height':leftheight}); }); html <div class="left"> 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.  <div class="right"> lorem ipsum dolor sit amet.  вам нужно будет включить <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.j">jquery 

я знаю, что это было давно, но я все равно разделяю свое решение. это трюк jquery.--- html<div class="custom-column"> <div class="column-left"> asd asd<br/> asd<br/>  <div class="column-right"> asd   <div class="custom-column"> <div class="column-left"> asd  <div class="column-right"> asd asd<br/> asd<br/>   ---- 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> </code></pre>

<p> <a href="https://jsfiddle.net/drjorgepolanco/9ab0v9ra/1/">скрипка</a> </p><p>html</p><pre><code><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> </code></pre><p>css</p><pre><code>.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; } </code></pre>