Как мне сохранить две бок о бок по той же высоте?

StackOverflow https://stackoverflow.com/questions/2997767

Вопрос

У меня есть два divs рядом. Я хотел бы, чтобы высота их была одинаковой, и оставался прежним, если один из них изменяет размер. Я не могу понять это, хотя. Идеи?

Чтобы прояснить мой запутанный вопрос, я бы хотел, чтобы обе коробки всегда были одинаковыми, поэтому, если кто -то вырастет, потому что текст помещается в него, другая должна расти, чтобы соответствовать высоте.

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

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

Другие советы

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

В основном вы делаете, что вы делаете оба Divs/Columns очень высокий, добавив 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>

Это та область, где 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.

Используя jQuery

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

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

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

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

Используя CSS

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

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

На мой взгляд, это намного превосходит как искусственные столбцы, так и одну истинную технику макета.

Общая идея заключается в том, что элемент с 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>

Вы можете использовать плагин jquery равной высоты для достижения, этот плагины делают все девственные высоты, что и другие. Если один из них вырастет, а другой также будет расти.

Здесь образец реализации

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/

Вы могли бы использовать Искусственные столбцы.

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

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

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

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

Этот вопрос был задан 6 лет назад, но все еще достоин дать простой ответ с Flexbox макет в наши дни.

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

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

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

Если вы не против одного из 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;
}

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

С этим подходом вы можете установить маржу между колоннами, границами и т. Д.

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

CSS GRID Way

Современный способ сделать это (что также избегает объявления <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>

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

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

Я знаю, что это было много времени, но я все равно делюсь своим решением. Это трюк 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 element.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] );

}

};

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

    });

У меня была та же проблема, поэтому я создал эту небольшую функцию, используя jQuery, так как jQuery является частью каждого веб -приложения в настоящее время.

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'
            });
        });
    }
}

Вы можете вызвать эту функцию на мероприятии Ready Page

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

Я надеюсь, что это сработает для вас.

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

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

То, что я сделал здесь,-это изменить высоту на мин-высот и дало ей фиксированное значение. Если один из них будет изменен, другой останется такой же высотой. Не уверен, это то, что вы хотите

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top