Как организовать на Jqery | высота блока = своей высоте + высота наибольшего из других двух?

Question

[3axapV]

Друзья, достался от предшественника шаблон, а там серьезный косяк с блоками.
Есть три блока в шаблоне, 2 подвижных ( id="sidebar" и id="midCol") и один центральный с контентом.
Если высота одного из подвижных блоков больше основного, то они наезжают на футер, если нет, то все красиво.
На css вариантов решения не нашел, но теоретически думаю, что можно на jqery.
Можно ли как-то организовать, по формуле, что высота центрального блока (.mincolw {
min-height: тут полученная переменная px;} ) min-height или height равна своей высоте + высота самого длинного из подвижных?

Что-то вроде такого:
min-height или height для класса mincolw = height для класса mincolw (то есть своя высота) + ( наибольшая высота из сравниваемых высот height(не задается в css, является динамическим) элементов/блоков sidebar и midCol, берется наибольшее)

Наверняка это как-то можно реализовать на jquery.. Кто-нибудь может подсказать решение?
Заранее спасибо.

Answer 1

[Евгений Калибров]

Добрый день, товарищ!
Вот тут реализовал https://jsfiddle.net/kpjk05o1/1/

$( document ).ready(function() {
    
    var contentHeight = $('.content').height();
    var sideLeftHeight = $('.side-left').height();
    var sideRightHeight = $('.side-right').height();
    
    if (contentHeight < sideLeftHeight || sideLeftHeight < sideRightHeight) {
        $('.content').height(contentHeight + ((sideLeftHeight>sideRightHeight)?sideLeftHeight:sideRightHeight));   
    }
    
});

Comments

[Евгений Калибров]

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

[3axapV]

Спасибо, все работает как надо, только поигрался маленько с ID вместо класса. Нашел только небольшой баг, почему то при первом открытии сайта, условие (contentHeight < sideLeftHeight || sideLeftHeight < sideRightHeight) добавляет высоту в Height всегда, если обновить страницу (только обновить по F5, не перейти по ссылке на главную, то становится все как надо, left и right колонки при меньшей, чем у центрального блока высоте, не добавляют высоты центральному), такое впечатление, что не успевает отработать условие. js файл со скриптом и jquery подключены в шапке.

[3axapV]

Не знаю, может я не прав, попробовал вот такое условие: if (centerblockHeight < sideLeftHeight || centerblockHeight < sideRightHeight) и вроде бы стало отображаться с первого раза. Еще раз большое спасибо за решение!

[3axapV]

rework: вообще да, я думаю приравниваться. Как это будет выглядеть с правильным синтаксисом, затрудняюсь ответить, догадываюсь, что последняя строка кода.

[Евгений Калибров]

Если приравнивать, то просто строку:
$('.content').height(contentHeight + ((sideLeftHeight>sideRightHeight)?sideLeftHeight:sideRightHeight));
Заменит на:
$('.content').height(((sideLeftHeight>sideRightHeight)?sideLeftHeight:sideRightHeight));

[3axapV]

rework: спасибо! Жаль за коммент не могу репу повысить.

Answer 2

[Владимир Рубанюк]

Можно вполне обойтись и без jQuery.
jsfiddle.net/prestonviewer/vju4pfwm

function adjustHeights() {
    var leftCol = document.querySelector('.leftCol');
    var rightCol = document.querySelector('.rightCol');
    var baseCol = document.querySelector('.baseCol');
    
    var maxHeight = Math.max(leftCol.scrollHeight, rightCol.scrollHeight);
    baseCol.style.height = maxHeight + "px";   
}

Если интересно как подобное реализовать на CSS: stackoverflow.com/questions/1205159/html-css-makin...

Comments

[3axapV]

Спасибо! Просто раз уж подключен JQ, то почему нет. CSS решение подобное встречал, но у меня другой случай вышел, применить не смог.