У меня макет из двух столбцов с серой боковой панелью справа. Мне нужно, чтобы высота боковой панели увеличивалась при увеличении высоты левого столбца (из-за динамического расширения содержимого). Я могу сделать так, чтобы боковая панель соответствовала статической странице, но я не могу заставить ее увеличиваться в размере вместе с остальной частью страницы. Немного погуглил, но не смог найти обходной путь, который сработал для меня.
Кто-нибудь знает как это сделать?
Это распространенная проблема при использовании DIVS для этого типа макета.
Если вы погуглите «Faux column», вы должны получить некоторые ответы.
например. http://www.alistapart.com/articles/fauxcolumns/
Это может немного отличаться, но если вы используете jQuery на своем сайте, вы можете выполнить быстрый расчет и изменить размер всех DIV, использующих аналогичный класс, до максимальной высоты:
$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
Меня давно преследует эта проблема, и я написал об этом статью: Готово с фальшивыми столбцами. Вот что я утверждал:
Решение этой проблемы на основе JavaScript не хуже любого другого решения. На самом деле, если вы используете JavaScript, вы можете сэкономить несколько часов разочарования, пытаясь заставить все работать. Люди будут предостерегать вас от этого, говоря: «Что произойдет, если пользователь отключит JavaScript?». Поверьте, если пользователь отключил JavaScript, для него все равно большая часть веба сломана. Ваша боковая панель не имеет для него значения.
Как упомянул cballou, самый простой способ сделать это — использовать код JQuery:
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
Я изменил background-color на тот же цвет, что и моя боковая панель, на этой конкретной странице, хотя у меня есть фоны для всех моих разделов, а не один общий фон. Но это может не сработать для всех.
В моей таблице стилей
.sidec
{
background-color:#123456;
}
На моей HTML-странице
<body class="sidec">
content....
</body>
Недавно я увидел довольно творческое решение этой проблемы с использованием свойств CSS position:absolute и border.
Определенно стоит проверить, работает ли это для вас.
Ссылка: http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
Я не уверен, что это поможет, так как я новичок. Однако, пытаясь заставить мою боковую панель отображать весь контент, когда я удвоил его размер, я сделал следующее. Я менял свою высоту и ширину без ответа, пока не изменил класс. В моем классе значилась рама SB шириной SB. Поэтому, когда я изменил свой класс для чтения высоты SB и ширины SB, он соответствовал моему содержимому, а не исходному размеру кадра. Я также попробовал SB max sb width, но он убрал строку меню нижнего колонтитула (это означает, что она больше не будет отображаться). Я вернулся к высоте SB, ширине SB, и все хорошо. Я уверен, что это супер-пупер элементарно для всех вас, но на всякий случай, если это читает еще один новичок, который не так много понимает в html-коде, как я... Надеюсь, это поможет =) Всех с праздником! объятия, Тара
Я предполагаю, что вы хотите применить определенный эффект к своему макету, чтобы он потребовал одновременного изменения размера обоих столбцов. Если вы хотите динамически изменять значения высоты столбцов, я сомневаюсь, что это будет работать просто с css, если вы не реализуете какой-либо javascript для управления стилем.
Как предложил Дал, посмотрите ссылку на поддельные столбцы. Как следует из названия, решение заключается не столько в изменении высоты столбцов. Вместо этого создается «иллюзия», что оба столбца кажутся одинаковой высоты, хотя на самом деле это не так, и это с использованием фрагментов фонового изображения.
Идея в том, что нет необходимости усложнять разметку. Простая структура с оттенком «иллюзии» с изображениями — обычная практика в веб-дизайне.
С уважением, Джона
С плохим отношением к новым членам здесь я ожидаю, что меня забанят за этот ответ, вот и все. Я решил эту проблему, создав фоновое изображение шириной 960 пикселей и высотой 1 пиксель с двумя цветами, которые мне нужны для столбцов с соответствующей шириной (780 пикселей и 180 пикселей). Затем я использовал это как фоновое изображение для моего контейнера, повторяющееся по оси Y, и сделал содержимое и цвет фона правой боковой панели прозрачным.
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}
.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}
Я уверен, что у этого метода есть свои ограничения, но он отлично работает на всех моих страницах.
Возможно, я не очень хорошо это объяснил, если да, то будьте любезны, пожалуйста. Я постараюсь расширить свой метод (который, вероятно, уже общеизвестен).
