Задать вопрос
@3axapV
javascript

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

Друзья, достался от предшественника шаблон, а там серьезный косяк с блоками.
Есть три блока в шаблоне, 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.. Кто-нибудь может подсказать решение?
Заранее спасибо.
  • Вопрос задан
  • 2364 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 2
rework
@rework
Помог ответ? В благодарность отметь его решением
Добрый день, товарищ!
Вот тут реализовал 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));   
    }
    
});
Ответ написан
6 комментариев
6 комментариев
pstn
@pstn
Веб-разработчик
Можно вполне обойтись и без 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...
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Консультация по UIKit & SwiftUI
03 мая 2024, в 22:42
1500 руб./в час
Разработать приложение (C#, wpf, MS SQL Server)
03 мая 2024, в 22:22
10000 руб./за проект
Работа со SwiperJs
03 мая 2024, в 22:18
1000 руб./за проект
Ещё заказы