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

yarikk

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

Shustry

  • Moderator
  • 6434
  • 745 / 3
Потому что тут много вариантов решения. Зависит от вашей разметки. Я бы сделал height: 100vh. Или flex. Но это, повторюсь, зависит от конкретной задачи.
*

yarikk

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

Shustry

  • Moderator
  • 6434
  • 745 / 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 от мэйна. Как видите, способов очень много. Насколько фантазии хватит.
*

yarikk

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

[РЕШЕНО]Скрыть пункт меню на мобильных устройствах

Автор lexxbry

Ответов: 16
Просмотров: 4623
Последний ответ 23.05.2023, 07:22:49
от geral
Не сворачивается Offcanvas Menu Helix3, якорная ссылка. Landing Page - РЕШЕНО

Автор alekshavan

Ответов: 21
Просмотров: 3374
Последний ответ 15.10.2022, 10:18:46
от forsight
Глюк вывода сайдбара

Автор IvanIvanch

Ответов: 0
Просмотров: 385
Последний ответ 18.12.2021, 13:20:40
от IvanIvanch
Не могу понять где могу убрать Google карту со страницы

Автор itbc

Ответов: 2
Просмотров: 499
Последний ответ 18.11.2021, 13:12:34
от itbc
[Решено] Модули шаблона Helix 3

Автор Egoritch

Ответов: 3
Просмотров: 559
Последний ответ 27.05.2021, 13:26:52
от Egoritch