bootstrap css, how to make full width div inside container

Question

I want to make this kind of layout with bootstrap framework:

    |   | menu       x |    |
    -------------------------
    ** **  full width  ** **
    -------------------------
    |   | site content |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    |   |              |    |
    -------------------------

I want a "container-fluid" div holding a "container" menu and it works fine, my problem is that I need to add a "full width" div just under the menu and I have no idea how to do this. Site content should have the "container" class while "full width" div "container-fluid", but I know that it's not possible to nest such classes.

how can I fix this with css keeping in mind that "menu" is fixed at top and "full width" div must scroll normally? I think I cannot use absolute positioning. I hope it's clear, otherwise I'll try to improve the question.

Answer 1

I would do three different containers, each one holds header, full width and site content accordingly

<div class="container"></div> <!-- header here -->
<div></div> <!-- full width here -->
<div class="container"></div> <!-- site content here -->

Answer 2

You can use positioning for this, and by using three different 'panels', you can position them wherever you wish on the page (and make them responsive, as well). For example:

.html,
body {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  position: relative;
}
.leftpanel,.rightpanel {
  width: 20%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: lightgray;
}
.rightpanel {
  left:auto;
  right: 0;
}
.content {
  width: 60%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 20%;
  background: gray;
}

<div class="container">
  <div class="leftpanel">Left Side</div>
  <div class="content">Body container</div>
  <div class="rightpanel">Right Container</div>
</div>