Puzzle page layout. Decide?

There is such a layout.
The catch is the intersection of the sections, the sidebar and the green section.
Need to come up with methods of layout considering the following:

  • Background green section stretches the full width of the viewport.
  • UPD. The background is homogeneous, no picture, no gradient;
  • The green content section fits into the given grid (in all breakpoint);
  • Green sections can be few (for simplicity, we can assume that all partitions behave as green, only with a different background);
  • The left column covers the following sections;
  • In mobile layout, the sidebar is at the bottom (and in the markup it is desirable that it was the last);
  • The height of the sidebar can exceed the height of the main content (which excludes its absolute positioning);

I have a couple of options, but I don't like them. I suggest to you, colleagues, to make suggestions (optional code you can simply text the explanations of the principles)

March 19th 20 at 08:39
2 answers
March 19th 20 at 08:41
Well, with the sidebar on the right side like all standard - why not make a column on the Flex or how they can be harmonized?
About background full-width - comes to mind, a solution with a pseudo-element for the green block, this pseudo-element width 100vw and height 100% and it is shifted to the left by the width of the sidebar and left margin with absolute positioning... I think this is the most painless option, because breaking the grid for the background makes no sense.
Yes, the option with the pseudo-elements first came to mind. In my view, we used both pseudo-element, left and right (background is homogeneous, not mentioned in the conditions), the excess of their width are truncated global wrapper with overflow:hidden. In this case, just strain the need for such wrappers.

What you have to offer with one element and exact positioning is not suitable, since the width of the viewport is undefined and it is unclear how many need to shift the element to the left. The width of the sidebar can not be a marker because to the left of it is still present area of the page is variable width. - Gerardo36 commented on March 19th 20 at 08:44
Your option has a good advantage — a single background element. Now it is irrelevant, but in principle, in the future, there may be sections with a picture in the background, so I decided to move in this direction. Without a little javacript hack no cost (the calculation of the width of a scrollbar), but the decision applies, in my opinion. Now it will be introduced, break in/test and I will unsubscribe in question. - Gerardo36 commented on March 19th 20 at 08:47
The width of the sidebar can not be a marker because to the left of it is still present area of the page is variable width.

Then of course, Yes, you know better the context - depending on how you set the sizes of the regions, the max-width in pixels, or width percentage, etc. etc. But in General, most likely this variable width can be computed using calc(). - Lance commented on March 19th 20 at 08:50
March 19th 20 at 08:43

Because the content of the sections always remained within the grid, and the filler acts only as a background, and with an eye on the future (suddenly the background will be the picture, not solid color) sought a solution on the basis of the option suggested by @Lance .

The total column layout page

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

The section is placed inside the main column

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

The styles of columns are the usual bootstraps grid (part of media queries removed for brevity)

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

.page {
 @include make-row();

 &__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;

And styles the section itself (the actual solution)

$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);

The value for the variable $default-scrollbar-width is measured in the browser line.
Of course, it's not good to use, so the width of the scrollbar is measured by javasript and the page is inserted corrective style
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';
 (document.head || document.getElementsByTagName('head')[0]).appendChild(style);

All this crap with the right marginal and width of the scrollbar is needed to get rid of the horizontal scrollbar.

Find more questions by tags HTMLCSS