Is it possible to impose such a template on bootstrap 3 and if so, how to do it?

The page with all the contents of a fixed size, the header is permanently attached at the top, the left column (sidebar) is permanently to the left, to the right is the area for the current content, while the content area has its own header , which is also attached.
If the sidebar has too many elements, then it should have its own scrollbar, the same for the area on the right. In other words, there should be no common scrollbar.

I myself did such a template, but using JS, including to monitor the resize of the window and recalculate the dimensions.

The picture shows what I would like to get in the end.

enter image description here

  • You can do everything. And what exactly did you cause problems in the layout, in which place you could not realize your layout? In bootstrap 3, such a pattern is generally made easy, especially when the border-box appeared :) - MasterAlex
  • I'm still picking standard templates, learning. I can make (-remove / use existing) a template with a fixed header and sidebar, but I don’t understand how to make the area on the right with my fixed hedaer. - hcuser

3 answers 3

Yes, this option is possible.

If you are doing well with English, then it is better to read the textbook.

Looks like a typical dashboard template; Google help, look for "bootstart templates" and follow the links. For example, site - link , link ...

  • Searched, downloaded, watched. There is no one who satisfies my desire; But the problem is that I do not understand how to at least remake it for myself. - hcuser
  • one
    The template for the first link is 90% compliant with the conditions of the problem, the remaining 10% are easily finished by hand: set the position: fixed to the second header and the margin / padding-top: 40px container next to it. - nörbörnën
  • one
    proper: .page-header {padding-bottom: 9px; margin: 0px 0 20px; border-bottom: 1px solid #eee; position: fixed; background-color: #ffffff; width: 100%; } div # main p {margin: 60px 0 10px; } - nörbörnën
  • no, it’s not all rolling, the scrollbar on the right remains common, and it should appear in that diva where the content does not fit, as in the figure. And with such decisions, the slider goes under a fixed block from above, which is not aesthetically pleasing. My plan was solved with the use of js, it seems that even without crutches it is impossible to do. - hcuser

I went to the site Bootstrap, got into the examples and found exactly what you need :)

And in order to understand how to make fixed header blocks, here's another example , again off. the site