Задачка для матерых верстальщиков

ETNO
На сайте с 16.06.2008
Offline
117
716

Такая вот нестандартная есть задачка.

Есть три колонки фиксированной ширины. В каждой есть контент. В 3 колонке контента много и она очень высокая. Нужно сделать так, чтобы высота третьей колонки подстраивалась под общую высоту первых двух и если она больше, то появлялся скролл. Ну а если контент в первых двух по высоте также как и в третьей, то скрол убирался бы.

В какую сторону копать?

Wordpress тема для заработка на партнерках (http://themeforest.net/item/rehub-directory-shop-coupon-affiliate-theme/7646339). Создание каталогов с фильтрацией, расширенный функционал обзоров, layout builder, еженедельное обновление.
vandamme
На сайте с 30.11.2008
Offline
675
#1

overflow не пробовали ставить?

ETNO
На сайте с 16.06.2008
Offline
117
#2

Покажу на примере

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

[ATTACH]83750[/ATTACH]

Если высота первых двух равна 3 - то скролл убирается

[ATTACH]83751[/ATTACH]

jpg 1.jpg
jpg 2.jpg
[Удален]
#3

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

ETNO
На сайте с 16.06.2008
Offline
117
#4

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

RO
На сайте с 13.07.2009
Offline
88
#5

http://htmlbook.ru/css/overflow очевидно же

ETNO
На сайте с 16.06.2008
Offline
117
#6
RedOK:
http://htmlbook.ru/css/overflow очевидно же

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

upd. overflow мы в любом случае будем использовать, но как сделать, чтобы он срабатывал только когда первые 2 колонки меньше?

AlikZP
На сайте с 22.11.2009
Offline
107
#7

Люблю jQuery, почему-то

Допустим у вас есть три дива с одним классом, скажем .div

В этом случае:

$(document).ready(function(){

// Вычислим наибольшую высоту блока
var max = 0;
$('.div').each(function(){
if ($(this).height() > max) max = $(this).height();
});
// Установим ее для всех
$('.div').each(function(){
$(this).height(max);
});
});
Website CMS: быстрая, удобная, недорогая! Вечная лицензия за 45$ (/ru/forum/524503) Яся - быстрый поиск фото для товаров. OpenCart/ocStore. Дополнение. (/ru/forum/665287) Грамотная верстка ваших макетов (/ru/forum/comment/8853216)
ETNO
На сайте с 16.06.2008
Offline
117
#8

спасибо, сделал. Но вы чуть ошиблись. Правильно было бы вычислить максимальную высоту первых двух колонок, и сделать такую же и в третьей установив её overflow:auto.

Вот такой код у меня заработал

$(document).ready(function(){
// Вычислим наибольшую высоту блока
var max = 0;
$('.equal').each(function(){
if ($(this).height() > max) max = $(this).height();
});
// Установим ее для всех
$('.equal2').each(function(){
$(this).height(max);
});
});

первые 2 колонки equal, третья equal2

AlikZP
На сайте с 22.11.2009
Offline
107
#9

ETNO, ну да ) я просто подравнял все три, сори.

Рад что натолкнул на путь истинный :)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий