it-swarm.com.ru

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

У меня есть два 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>
392
NibblyPig

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>

Префиксы могут потребоваться для старых браузеров, см. поддержка браузера .

519
Pavlo

Это распространенная проблема, с которой многие сталкивались, но, к счастью, некоторые умные люди вроде Эд Элиот в своем блоге разместили свои решения в Интернете.

По сути, вы делаете оба элемента div/column очень высокими, добавляя padding-bottom: 100%, а затем "обманываете браузер", думая, что они не такие высокие, используя margin-bottom: -100%. Это лучше объяснил Эд Элиот в своем блоге, который также включает в себя множество примеров.

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

Это область, где у 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, Opera по крайней мере из версии 8 и в IE из версии 8.

54
Paul D. Waite

Используя Javascript

используя jQuery, вы можете сделать это в очень простом однострочном скрипте.

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

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

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

Использование CSS

Это немного интереснее. Техника называется Искусственные столбцы . Более или менее вы фактически не устанавливаете фактическую высоту одинаковой, но вы настраиваете некоторые графические элементы, чтобы они Посмотрите на ту же высоту.

38
Derek Adair

Я удивлен, что никто не упомянул (очень старый, но надежный) метод Absolute Columns: http://24ways.org/2008/absolute-columns/

На мой взгляд, он намного превосходит метод Faux Columns и метод One True Layout.

Общая идея заключается в том, что элемент с position: absolute; будет располагаться напротив ближайшего родительского элемента, который имеет position: relative;. Затем вы растягиваете столбец, чтобы заполнить 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>
14
geofflee

Вы можете использовать плагин 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.

Вот ссылка

http://www.cssnewbie.com/equalheights-jquery-plugin/

11
Starx

Вы можете использовать Faux Columns .

В основном он использует фоновое изображение в DIV, содержащем DIV, для имитации двух DIV одинаковой высоты. Использование этой техники также позволяет вам добавлять тени, скругленные углы, пользовательские границы или другие необычные узоры в ваши контейнеры.

Работает только с коробками фиксированной ширины.

Хорошо протестировано и правильно работает в каждом браузере.

8
Arve Systad

Просто заметил эту тему во время поиска этого самого ответа. Я только что сделал небольшую функцию 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>
5
Mike Wells

Этот вопрос задавался 6 лет назад, но все же стоит дать простой ответ с flexbox layout в наши дни.

Просто добавьте следующий CSS к отцу <div>, он будет работать.

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

Первые две строки объявляют, что это будет отображаться как flexbox. И flex-direction: row сообщает браузерам, что его дочерние элементы будут отображаться в столбцах. И align-items: stretch будет соответствовать требованию, чтобы все дочерние элементы растянулись до одинаковой высоты, если один из них станет выше.

3
Hegwin

Если вы не возражаете против того, чтобы один из divs был мастером и определял высоту для обоих divs, есть следующее:

Скрипки

Независимо от того, что 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;
}
2
Hashbrown

Мне нравится использовать псевдоэлементы для достижения этой цели. Вы можете использовать его в качестве фона содержимого и позволить им заполнить пространство.

При таком подходе вы можете устанавливать поля между столбцами, границами и т.д.

.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>
2
Adrian Menendez

Я испробовал почти все упомянутые выше методы, но решение 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
Jodyshop

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

вы можете использовать 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

0
pixeltocode

Я знаю, что это было давно, но я все равно разделяю свое решение. Это трюк 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>
0
Roy Vincent

скрипка

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