Нужна высота боковой панели CSS для расширения с контентом - PullRequest
Новая
       33

Нужна высота боковой панели CSS для расширения с контентом

2 голосов
/ 23 октября 2009

У меня двухколонный макет с серой боковой панелью справа. Мне нужно, чтобы высота боковой панели увеличивалась при увеличении высоты левого столбца (из-за динамического расширения содержимого). Я могу сделать боковую панель размером со статическую страницу, но не могу увеличить ее по сравнению с остальной частью страницы. Я немного погуглил, но не смог найти обходной путь, который бы сработал для меня.

Кто-нибудь знает, как это сделать?

Ответы [ 8 ]

10 голосов
/ 23 октября 2009

Это может быть немного не так, но если вы используете jQuery на своем сайте, вы можете выполнить быстрый расчет и изменить размер всех DIV, разделяющих подобный класс, до максимальной высоты: 

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
10 голосов
/ 23 октября 2009

Это распространенная проблема при использовании DIVS для этого типа макета.

Если вы гуглите «Faux column», вы должны получить ответы на некоторые вопросы.

например. http://www.alistapart.com/articles/fauxcolumns/

5 голосов
/ 23 октября 2009

Эта проблема преследует меня некоторое время, и я написал статью об этой проблеме: Закончено с искусственными столбцами . Вот что я утверждал:

Решение на основе JavaScript для этого проблема не хуже любой другой решение. На самом деле, если вы используете JavaScript, вы можете сэкономить несколько часов разочарования в попытках получить вещи за работой. Люди будут предупреждать вас против это, говоря: «Что произойдет, если пользователь отключил JavaScript? Поверьте, если пользователь выключил JavaScript, большая часть сети не работает для него все равно. Ваша боковая панель не важно для него.

Как уже упоминал cballou, самый простой способ сделать это - использовать код JQuery: 

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
2 голосов
/ 01 октября 2012

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

В моей таблице стилей 

.sidec
{
background-color:#123456;
}

На моей HTML-странице 

<body class="sidec">

content....

</body>
1 голос
/ 11 декабря 2012

Я не уверен, поможет ли это, так как я новичок. Однако, пытаясь заставить мою боковую панель показывать весь контент, когда я удвоил его размер, я сделал следующее. Я менял свой рост и ширину без ответа, пока я не изменил класс. Мой класс был перечислен SB кадр SB ширину. Поэтому, когда я изменил свой класс на чтение SB height SB width, он соответствовал моему содержанию, а не исходному размеру кадра. Я также попробовал SB max sb width с работало, но это вывело мою строку меню нижнего колонтитула (то есть это больше не показывало бы). Я вернулся к СБ, высота СБ, ширина, и все хорошо. Я уверен, что это очень просто для всех вас, но на всякий случай, если кто-то из новичков читает это, не очень понимает HTML-код, такой как я ... С праздником всех! объятия, тара

1 голос
/ 23 октября 2009

Недавно я увидел довольно креативное решение этой проблемы, используя свойства CSS position:absolute и border.

Определенно стоит проверить, работает ли он для вас.

Ссылка: http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

0 голосов
/ 24 декабря 2012

С плохим отношением к новым членам здесь я ожидаю, что меня забанят за этот ответ. Я справился с этой проблемой, создав фоновое изображение шириной 960px и высотой 1px с двумя цветами, необходимыми для столбцов с соответствующей шириной (780px и 180px). Затем я использовал это в качестве фонового изображения для моего контейнера, повторенного по оси 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;
}

Я уверен, что у этого метода есть свои ограничения, но он отлично работает на всех моих страницах.

Вполне возможно, что я не очень хорошо объяснил это, если так, будьте добры, пожалуйста. Я постараюсь расширить свой метод (который, вероятно, уже известен).

0 голосов
/ 23 октября 2009

Полагаю, вы хотите применить определенный эффект к макету, так что для изменения размера обоих столбцов потребуется. Если вы хотите динамически изменять значения высоты столбцов, я сомневаюсь, что это будет работать просто с CSS, если вы не реализуете некоторый JavaScript для управления стилем.

Как предположил Даль, посмотрите на ссылку на искусственных столбцах. Как следует из названия, решение не так много об изменении высоты столбцов. Вместо этого он создает «иллюзию», что оба столбца имеют одинаковую высоту, хотя на самом деле это не так - и это происходит с использованием плиток фонового изображения.

Идея в том, что нет необходимости усложнять наценку. Простая структура с оттенком «иллюзии» с изображениями является обычной практикой в ​​веб-дизайне.

С уважением, Ионы

...