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

StackOverflow https://stackoverflow.com/questions/1610710

  •  05-07-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

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

Если вы загуглите "Искусственная колонка", вы должны получить несколько ответов.

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

Другие советы

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

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));

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

  

Решение на основе JavaScript для этого   проблема не хуже любой другой   решение. На самом деле, если вы используете   JavaScript, вы можете сэкономить несколько часов   разочарования в попытках получить вещи   за работой. Люди будут предупреждать вас против   это, сказав & # 8220; что произойдет, если   пользователь отключил JavaScript? & # 8220 ;.   Поверьте, если пользователь выключил   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 height SB width, он соответствовал моему содержанию, а не исходному размеру кадра. Я также попробовал SB max sb width с работало, но он вынул мою строку меню нижнего колонтитула (то есть больше не будет отображаться) Я вернулся к СБ, высота СБ, ширина, и все хорошо. Я уверен, что это очень просто для всех вас, но на всякий случай, если кто-то из новичков читает это, не очень понимает HTML-код, такой как я ... Надеюсь, это поможет =) С праздником всех! обнимаю, тара

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

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

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

С уважением, Джона

С плохим отношением к новым членам здесь я ожидаю, что меня забанят за этот ответ. Я справился с этой проблемой, создав фоновое изображение шириной 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;
}

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top