[Решено] Высота сайдбара на всю высоту контента страницы

  • 4 Ответов
  • 126 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн yarikk

День добрый. Подскажите, как можно сайдбар растянуть на всю высоту контента страницы.
Вот здесь http://joomlaforum.ru/index.php/topic,331322.0.html аналогичная тема, к сожалению ответа никто не дал.
Заранее спасибо.
« Последнее редактирование: 21.06.2017, 17:07:09 от yarikk »

*

Оффлайн Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
    • Просмотр профиля
    • Примеры работ
Потому что тут много вариантов решения. Зависит от вашей разметки. Я бы сделал height: 100vh. Или flex. Но это, повторюсь, зависит от конкретной задачи.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Оффлайн yarikk

Я бы сделал height: 100vh.
В этом случае бекграунд применяется не ко всему сайдбару.
« Последнее редактирование: 21.06.2017, 16:48:46 от yarikk »

*

Оффлайн Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
    • Просмотр профиля
    • Примеры работ
Так это для фиксированного сайдбара. Используйте флекс тогда:

Код: (html4strict) [Выделить]
<div class="container">
   <div></div>
   <div></div>
   <div></div>
</div>

Код: (css) [Выделить]
.container{
   display: flex;
   flex-direction: row; /*Пункты внутри контейнера будут располагаться горизонтально*/
   align-items: stretch; /*Пункты внутри контейнер будут принимать всю его высоту*/
}

Важно понимать, для чего вы растягиваете сайдбар. Навряд ли у вас контента в нём столько же, сколько в мэйне. Скорее всего, у сайдбара какой-то свой фон. Тогда проще сделать псевдоэлементом к мэйну и растянуть его на 100%.
Ещё можно использовать две обёртки и отрицательные отступы. Очень старый способ. Но, при наличии флекса в 2017-м — неактуальный. Как и способ с display:table. Кстати, если вам нужно просто выделить сайдбар другим фоновым цветом, можно тупо бросить box-shadow от мэйна. Как видите, способов очень много. Насколько фантазии хватит.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Оффлайн yarikk

Код: (css) [Выделить]
.container{
   display: flex;
   flex-direction: row; /*Пункты внутри контейнера будут располагаться горизонтально*/
   align-items: stretch; /*Пункты внутри контейнер будут принимать всю его высоту*/
}
Вместо .container подставил .row-fluid (шаблон протостар) и все получилось как надо.
Огромнейшее тебе спасибо))