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

yarikk

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

Shustry

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

yarikk

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

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Так это для фиксированного сайдбара. Используйте флекс тогда:

Код: 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 от мэйна. Как видите, способов очень много. Насколько фантазии хватит.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

yarikk

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

Условие для вывода суффикса страницы

Автор kik84

Ответов: 2
Просмотров: 153
Последний ответ 17.05.2017, 09:11:02
от kik84
[Решено] CSS-класс заголовка модуля

Автор schel4ok

Ответов: 35
Просмотров: 8682
Последний ответ 07.05.2017, 14:53:07
от SpiDeR-Sx2
Helix3: как придать высоту пустой строке Row, созданной в Layout шаблона

Автор lesovik

Ответов: 4
Просмотров: 312
Последний ответ 19.04.2017, 01:45:38
от lesovik
Сменить фон и wrapper для каждой страницы

Автор imron

Ответов: 0
Просмотров: 130
Последний ответ 17.02.2017, 19:53:12
от imron
[Решено] Как зацентровать сборку дивов с сохранением горизонтального чередования аля float: left;?

Автор zndm

Ответов: 2
Просмотров: 139
Последний ответ 08.02.2017, 21:26:49
от beliyadm