Создание боковой панели в зависимости от высоты сообщения

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

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

Каким будет лучший способ сделать это?
Javascript?

Вот скриншот дизайна / эскиза (нажмите, чтобы увеличить):
дизайн-эскиз

Вот текущая версия в реальном времени , но многое еще предстоит сделать, работа продолжается!

Solutions Collecting From Web of "Создание боковой панели в зависимости от высоты сообщения"

JavaScript, безусловно, путь. Посмотрите функции jQuery height () и outerHeight () . externalHeight () включает поля и отступы, height () – нет.

Чтобы это было как можно проще, я бы сначала создал боковую панель с фиксированной высотой (из WP / PHP), где высота – разумная оценка вашего самого длинного сообщения, а затем используйте JavaScript, чтобы уменьшить его по высоте. Если вы сначала не отобразите самую длинную боковую панель, а затем уменьшите ее до размера, вам придется использовать Ajax для возврата на сервер и получения большего количества боковых панелей, и это будет медленнее и приведет к появлению более визуальной «поп- вверх "на боковой панели.

Убедитесь, что боковая панель состоит из элементов (DIV или LI), которые можно легко удалить с помощью $ (). Hide ();

Если вы обнаружите, что резка высоты боковой панели дает заметное / раздражающее обновление экрана, вы можете сначала скрыть всю полосу прокрутки и показать только обновленную версию – вы все равно получите всплывающее окно боковой панели, но это, вероятно, будет выглядеть бит более плавный, чтобы ничего не выскочить до нужной полосы прокрутки по размеру, чем иметь слишком длинную полосу прокрутки до более короткой.

Хорошая типография на сайте, кстати. 🙂