сопоставление высоты div с jQuery - PullRequest
Новая
       22

сопоставление высоты div с jQuery

1 голос
/ 22 декабря 2011

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

function matchColHeights(col1, col2) {
    var col1Height = $(col1).height();
    var col2Height = $(col2).height();
    if (col1Height < col2Height) {
        $(col1).height(col2Height);
    } else {
        $(col2).height(col1Height);
    }
}

$(document).ready(function() {
    matchColHeights('#leftPanel', '#rightPanel');
});

пытается сделать это здесь: http://www.tigerstudiodesign.com/blog/

Ответы [ 4 ]

2 голосов
/ 22 декабря 2011

одна альтернатива 

$(".column").height(Math.max($(col1).height(), $(col2).height()));

Проверьте эту скрипку: http://jsfiddle.net/c4urself/dESx6/

Кажется, у меня нормально работает?

1012 * Javascript *

function matchColHeights(col1, col2) {
    var col1Height = $(col1).height();
    console.log(col1Height);
    var col2Height = $(col2).height();
    console.log(col2Height);
    if (col1Height < col2Height) {
        $(col1).height(col2Height);
    } else {
        $(col2).height(col1Height);
    }
}

$(document).ready(function() {
    matchColHeights('#leftPanel', '#rightPanel');
});

CSS 

.column {
    width: 48%;
    float: left;
    border: 1px solid red;
}

HTML 

<div class="column" id="leftPanel">Lorem ipsum...</div>
<div class="column" id="rightPanel"></div>
2 голосов
/ 22 декабря 2011

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

function matchColHeights(selector){
    var maxHeight=0;
    $(selector).each(function(){
        var height = $(this).height();
        if (height > maxHeight){
            maxHeight = height;
        }
    });
    $(selector).height(maxHeight);
};

$(document).ready(function() {
    matchColHeights('#leftPanel, #rightPanel, #middlePanel');
});
0 голосов
/ 09 апреля 2013

Лучшую статью по этому вопросу можно найти здесь:

http://css -tricks.com / равная высота-блоки-в-строка /

0 голосов
/ 22 декабря 2011

Когда я загружаю ваш сайт в Chrome, высота #leftPanel составляет 1155 пикселей, а высота #rightPanel - 1037 пикселей. Затем высота #rightPanel устанавливается вашим методом matchColHeights равной 1155px.

Однако , если я разрешу загрузку страницы, то с помощью консоли инструментов разработчика Chrome удалите атрибут style, который задает явную высоту для #rightPanel, его высота становится 1473px. Таким образом, ваш код правильно устанавливает короче из двух столбцов в высоту во время выполнения кода. Но последующее форматирование страницы сделало бы другой столбец выше.

...