Вопрос по javascript, jquery, css – Как мне достичь равных высот div (расположенных рядом) с HTML / CSS?

13

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

Например, правый div имеет много содержимого и в два раза больше высоты левого div. Как сделать так, чтобы левый div растягивался на ту же высоту правого div?

Есть ли какой-нибудь код JavaScript (jQuery) для этого?

Однажды для этого использовались таблицы. David

Ваш Ответ

11   ответов
17

мо используйте jQuery, но есть и лучшие способы сделать это.

Такого рода вопросы часто возникают, и обычно есть 3 ответа ...

1. Используйте CSS

Это «лучший» способ сделать это, так как это наиболее семантически чистый подход (не прибегая к JS, у которого есть свои проблемы). Лучше всего использоватьdisplay: table-cell и связанные значения. также можете попробовать использовать искусственная фоновая техника (что можно сделать с помощью градиентов CSS3).

2. Использовать таблицы

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

3. Используйте jQuery / JavaScript

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

альтернатива # 2:display:table. Однако я заметил проблему с таблицами в том, что они не переходят должным образом. Итак, CSS3 + таблицы = нет-нет John Dvorak
@ JanDvorak Полагаю, что тогда дискредитирует использование таблиц alex
@ alex Использование flexbox может быть и другим решением. видеть / Stackoverflow.com вопросы / 22253122 / ... Adrien Be
Вторая ссылка мертва John Dvorak
11

однако, как вы заметите в примере (который работает в IE 7 и Firefox), границы могут быть трудными, но они не являются невозможными, поэтому все зависит от того, что вы хотите сделать. В этом примере предполагается довольно распространенная структура CSS тела> обертка> контейнер содержимого> столбец 1 и столбец 2.

Клавиша - это нижнее поле и его отменяющий отступ.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal Height Columns</title>
<style type="text/css">
<!--
* { padding: 0; margin: 0; }
#wrapper { margin: 10px auto; width: 600px; }
#wrapper #main_container { width: 590px; padding: 10px 0px 10px 10px; background: #CCC; overflow: hidden; border-bottom: 10px solid #CCC; }
#wrapper #main_container div { float: left; width: 263px; background: #999; padding: 10px; margin-right: 10px; border: 1px solid #000; margin-bottom: -1000px; padding-bottom: 1000px; }
#wrapper #main_container #right_column { background: #FFF; }
-->
</style>
</head>

<body>
<div id="wrapper">
    <div id="main_container">
        <div id="left_column">
            <p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
        </div><!-- LEFT COLUMN -->
        <div id="right_column">
          <p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
          <p>&nbsp;</p>
          <p>For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?</p>
          <p>&nbsp;</p>
          <p>Is there some JavaScript (jQuery) code to accomplish this?</p>
        </div><!-- RIGHT COLUMN -->
    </div><!-- MAIN CONTAINER -->
</div><!-- WRAPPER -->
</body>
</html>

Вот как это выглядит

Очень интересное решение! К сожалению, это не сработает, если вы измените #wrapper #main_container div {width: 263px -> 50%} Maximilian Lindsey
4

ты можешь заставить его работать с js:

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>
действительно, как этот Энди, было бы еще лучше, если бы он обновлялся при изменении ширины браузера. При изменении размера высота остается неизменной. fourroses
@ Andi P. Trix привет! это работает нормально, но не изменится автоматически, если я попытаюсь изменить размер экрана, мне нужно обновить, чтобы увидеть результаты. Какой-то способ сделать это динамически? заранее спасибо приятель! Eugenio
3

хотя ни одна из них не соответствовала моим потребностям в ОКР. Возможно, вам придется потратить секунду, чтобы разобраться с этим, хотя это лучше, чем использование JavaScript.

Известные недостатки:

Не поддерживает несколько строк элементов в случае контейнера с динамической шириной. Не работает в IE6.

База

Красный - это (вспомогательный) контейнер, который вы бы использовали для установки поля для содержимого. Зеленый являетсяposition: relative; overflow: hidden и (необязательно, если вы хотите, чтобы столбцы центрировались)text-align: center; font-size: 0; line-height: 0; Синий display: block; float: left; или (опционально, если вы хотите, чтобы столбцы центрировались)display: inline-block; vertical-align: top;

Так что ничего необычного. Независимо от содержания, что Синий элемент имеет, вам нужно добавить абсолютно позиционированный элемент Желтый; обратите внимание, чтоz-index этого элемента должен быть ниже, чем фактический Содержание синего поля) с этим элементом и установитеtop: 0; bottom: 0; (не устанавливайте левую или правую позицию).

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

Для этого нужно добавитьpadding-bottom (темно-зелены) Эквивалент с фиксированной высотой содержимого на Синий элементы.

Затем в пределах Желтый элементы создают еще один абсолютно позиционированный left: 0; bottom: 0;) элемент темно-сини).

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

yellow:hover + blue {}

Вот код и Демо:

HTML:

<div id="products">
    <ul>
        <li class="product a">
            <a href="">
                <p class="name">Ordinary product description.</p>
                <div class="icon-product"></div>
            </a>
            <p class="name">Ordinary product description.</p>
        </li>
        <li class="product b">
            <a href="">
                <p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
                <div class="icon-product"></div>
            </a>
            <p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
        </li>
        <li class="product c">
            <a href="">
                <p class="name">Another ordinary product description.</p>
                <div class="icon-product"></div>
            </a>
            <p class="name">Another ordinary product description.</p>
        </li>
    </ul>
</div>

SCSS / МЕНЬШЕ:

#products { 
    ul { position: relative; overflow: hidden; text-align: center; font-size: 0; line-height: 0;  padding: 0; margin: 0;
        li { display: inline-block; vertical-align: top; width: 130px; padding: 0 0 130px 0; margin: 0; }
    }

    li {
        a { display: block; position: absolute; width: 130px; background: rgba(255,0,0,.5); z-index: 3; top: 0; bottom: 0;
            .icon-product { background: #ccc; width: 90px; height: 90px; position: absolute; left: 20px; bottom: 20px; }
            .name { opacity: 1; }
        }

        .name { position: relative; margin: 20px 10px 0; font-size: 14px; line-height: 18px; opacity: 0; }

        a:hover {
            background: #ddd; text-decoration: none;

            .icon-product { background: #333; }
        }
    }
}

Обратите внимание, что для исправления используется демо-версия, включающая дублирование данныхz-index. Кроме того, вы можете использоватьpointer-events: none и любое решение для IE.

1

здесь очень простое решение с коротким отображением css: таблица

<div id="main" class="_dt-no-rows">
  <div id="aside" contenteditable="true">
    Aside
    <br>
    Here's the aside content
  </div>
  <div id="content" contenteditable="true">
    Content
    <br>
    geht's pellentesque wurscht elementum semper tellus s'guelt Pfourtz !. gal hopla
    <br>
    TIP : Just clic on this block to add/remove some text
  </div>
</div>

здесь есть css

#main {
 display: table;
 width: 100%;
}
#aside, #content {
  display: table-cell;
  padding: 5px;
}
#aside {
  background: none repeat scroll 0 0 #333333;
  width: 250px;
}
#content {
background: none repeat scroll 0 0 #E69B00;
}

это выглядит так

0

я не делаю тонны jQuery, но в мире CSS / Javascript я бы просто использовал объектную модель и написал бы следующее:

if(leftDiv.style.height > rightDive.style.height)
   rightDiv.style.height = leftDiv.style.height;
else
   leftDiv.style.height = rightDiv.style.height)
Ты можешь использоватьMath.max() здесь, и установите их обоих. Может быть, более элегантно. alex
был достаточно хорош в 2009 году, когда он был написан, но с адаптивными макетами все стало намного сложнее. LessQuesar
Ты серьезно отверг ответ 7 лет спустя, потому что технология отличается? lkg
Мне нужно было найти не jquery метод для этого. Эта тема возникла в поиске Google. Это было как 2 часа ночи, мое плохое обвинение в понижении голосов. LessQuesar
0

который я использовал с некоторым успехом.

Я не уверен, что я использую тот из группы филаментов, упомянутой выше, или это это был первый результат Google ... В любом случае плагин jquery, вероятно, самый простой и гибкий способ.

0

что есть два div, имеющие идентификаторы «left» и «right».

var heightR = $("#right").height();
var heightL = $("#left").height();

if(heightL > heightR){
    $("#right").css({ height: heightL});
} else {
    $("#left").css({ height: heightR});
}
0

щей, вот метод, который я использовал, чтобы добиться этого, используя только javascript:

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

С «left» и «right» - идентификаторы двух тегов div.

0

Кажется длинным, но очень простым!

function equalizeHeights(elements){
    //elements as array of elements (obtain like this: [document.getElementById("domElementId"),document.getElementById("anotherDomElementId")]

    var heights = [];
    for (var i=0;i<elements.length;i++){
        heights.push(getElementHeight(elements[i],true));
    }

    var maxHeight =  heights[biggestElementIndex(heights)];

    for (var i=0;i<elements.length;i++){
        setElementHeight(elements[i],maxHeight,true);
    }
}

function getElementHeight(element, isTotalHeight){
    // isTotalHeight triggers offsetHeight
    //The offsetHeight property is similar to the clientHeight property, but it returns the height including the padding, scrollBar and the border.
    //http://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript
    {
        isTotalHeight = typeof isTotalHeight !== 'undefined' ? isTotalHeight : true;
    }

    if (isTotalHeight){
        return  element.offsetHeight;
    }else{
        return element.clientHeight;
    }
}

 function setElementHeight(element,pixelHeight, setAsMinimumHeight){

    //setAsMinimumHeight: is set, we define the minimum height, so it can still become higher if things change...
    {
        setAsMinimumHeight = typeof setAsMinimumHeight !== 'undefined' ? setAsMinimumHeight : false;
    }
    var heightStr = "" + pixelHeight + "px";
    if (setAsMinimumHeight){
        element.style.minHeight = heightStr; // pixels
    }else{
        element.style.height = heightStr; // pixels
    }
}

 function biggestElementIndex(arr){
    //http://stackoverflow.com/questions/11301438/return-index-of-greatest-value-in-an-array
    var max = arr[0];
    var maxIndex = 0;

    for (var i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
            maxIndex = i;
            max = arr[i];
        }
    }
    return maxIndex;
}
0

но решение JS с методом equal_heights () в некоторых ситуациях не работает, представьте, что у вас есть продукты рядом друг с другом. Если вы примените его только к родительскому контейнеру, да, они будут иметь одинаковую высоту, но разделы с названиями продуктов могут отличаться, если один из них не умещается в две строки, вот где я бы предложил использовать ниже

https: //jsfiddle.net/0hdtLfy5/3

function make_children_same_height(element_parent, child_elements) {
    for (i = 0; i < child_elements.length; i++) {
    var tallest = 0;
    var an_element = child_elements[i];
    $(element_parent).children(an_element).each(function() {
      // using outer height since that includes the border and padding
      if(tallest < $(this).outerHeight() ){
        tallest = $(this).outerHeight();
      }
    });

    tallest = tallest+1; // some weird shit going on with half a pixel or something in FF and IE9, no time to figure out now, sowwy, hence adding 1 px
    $(element_parent).children(an_element).each(function() {
        $(this).css('min-height',tallest+'px');
    });
  }
}

Похожие вопросы