Головоломка с раскладкой страницы. Решим?

Question

[Сергей delphinpro]

Имеется такой макет.
Загвоздка в пересечении секций — сайдбар и зеленая секция.
Нужно придумать методику раскладки учитывая следующее:

• Фон зеленой секции тянется на всю ширину вьюпорта;
  
• UPD. Фон однородный, не картинка, не градиент;
  
• Контент зеленой секции вписывается в заданную сетку (во всех брикпойнтах);
  
• Зеленых секций может быть несколько (для упрощения можно считать, что все секции ведут себя как зеленые, только с разным фоном);
  
• Левая колонка перекрывает такие секции;
  
• В мобильной раскладке сайдбар оказывается внизу (и в разметке желательно, чтобы он был последним);
  
• Высота сайдбара может превышать высоту основного контента (что исключает его абсолютное позиционирование);
  

У меня есть пара вариантов, но они мне не нравятся. Предлагаю вам, коллеги, высказать свои предложения (необязательно код, можно и просто текстового объяснения принципов)

Comments

[Stanislav Pugachev]

Я конечно фулстек, но пусть верстает кто-нибудь другой. (с)

[Егор Живагин]

Оо, выглядит интересно прям. После работы обязательно попробую сделать это красиво)

Answer 1

[#FFFFFF]

Ну с сайдбаром вроде всё стандартно - почему бы не сделать колонки на флексах или гридах?
По поводу фона на всю ширину - приходит в голову решение с псевдоэлементом для зелёного блока, у этого псевдоэлемента ширина 100vw и высота 100% и он сдвинут влево на ширину сайдбара и левого отступа, с абсолютным позиционированием... Как мне кажется, это самый безболезненный вариант, потому что ломать сетку ради фона смысла не вижу.

Comments

[Сергей delphinpro]

Да, вариант с псевдоэлементами первым пришел в голову. В моем представлении использованы оба псевдоэлемента, слева и справа (фон однородный, не упомянул этого в условиях), излишки их ширины обрезаются глобальной оберткой с overflow:hidden. В этом случае как раз напрягает необходимость такой обертки.

То что вы предлагаете с одним элементом и точным позиционированием не подходит, так как ширина вьюпорта неопределена, и непонятно на сколько нужно смещать элемент влево. Ширина сайдбара не может быть маркером, т.к. слева от него еще присутствует область страницы переменной ширины.

[Сергей delphinpro]

У вашего варианта есть хорошее преимущество — единый фоновый элемент. Сейчас это неактуально, но в принципе, в будущем, могут появиться секции с картинкой на фоне, так что я решил двигаться в этом направлении. Без небольшого javacript-хака не обошлось (вычисление ширины полосы прокрутки), но решение годное, на мой взгляд. Сейчас его внедрю, обкатаю/протестирую и отпишусь в вопросе.

[#FFFFFF]

Сергей delphinpro,

Ширина сайдбара не может быть маркером, т.к. слева от него еще присутствует область страницы переменной ширины.

Тут конечно да, вам контекст виднее - смотря как задаются размеры областей, max-width в пикселях или же ширина в процентах и т.д. и т.п. Но вообще, скорее всего эта переменная ширина может быть вычислена через calc().

Answer 2

[Сергей delphinpro]

Решение.

Так как контент секций всегда остается в пределах сетки, а заполнителем выступает лишь фон, и с оглядкой на будущее (вдруг фоном будет выступать картинка, а не сплошной цвет) искал решение на основе варианта, предложенного #FFFFFF .

Общая разметка колонок страницы

<div class="page">
  <div class="page__main"> ... </div>
  <div class="page__side"> ... </div>
</div>

Секция размещается внутри основной колонки

<div class="page__main">
    <div class="section">
      <div class="section__body">
        ...
      </div>
    </div>
  </div>

Стили колонок представляют собой обычную бутстраповскую сетку (часть медиа-запросов убрана для краткости)

/*==
 *== Page layout
 *== ======================================= ==*/

.page {
  @include make-row();

  &__main,
  &__side {
    @include make-col-ready();
  }

  &__side {
    z-index: 1;
  }
  
  // <…cut>

  @include media-breakpoint-up(lg) {
    &__main {
      @include make-col(9);
    }
    &__side {
      @include make-col(3);
      order: -1;
    }
  }
}

И стили самой секции (собственно решение проблемы)

$default-scrollbar-width: 16px;

.section {
  @include make-row();
  position: relative;

  &__body { @include make-col-ready(); }

  &::before {
    z-index: -1;
    position: absolute;
    top: 0;
    right: percentage(6/9);
    width: 100vw;
    height: 100%;
    transform: translateX(50%);
    margin-right: ($default-scrollbar-width / 2);
  }
}

Значение для переменной $default-scrollbar-width измерено в браузере линейкой.
Конечно, это не годится для использования, поэтому ширина скроллбара измеряется джавасриптом и в страницу вставляется корректирующий стиль

App.compensateWidthScrollbar = function () {
    let width  = this.getScrollbarWidth();
    let css    = '.section::before{margin-right:'+ (width / 2) + 'px';
    let style  = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    (document.head || document.getElementsByTagName('head')[0]).appendChild(style);
};

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