I want a bootstrap "content" container to have two containers one fixed height and one with percentage

Question

I have some problems on how to program a responsive "content" box from bootstrap. As in the JsFiddle-Link shown I want to make the inner of the Bootstrap content-inner responsive.

In the content-inner box i have

• one div which has a fixed width (red)

• the second container (an article container) is the container which should take the remaining space of the page (so as the height gets bigger the white background should get bigger and the top and bottom grey space smaller). This Container has also an overflow-y but the overflow-x is hidden because of the scroll bar on the right there would also be a scrollbar at the bottom. (green)

• and the third one has a fixed width, too (blue)

Attention on the space at the top and the bottom, there should be a space.

I din't really know that much methods on realizing/solving this problem.
So I searched for methods on how to realize and I found the CSS Calc() function. Is it true that this "function" is just experimental? I tested it with this function but I didn't really got a successfull result so I don't know any more methods.

My problems I got when testing to resolve this issue was that the white background of the content-inner box where all the content is located went away :/
I tried to fix it with the Bootstrap class clearfix but I wasn't successfull.

So do you have any solution on how to solve this problem?

Thank you for all the helpfull results and answers and thank you for any help. :)

Answer 1

I'm not 100% I fully understand your question but if you want the elements above and below the article to be fixed height and the scrollable article to respond to different viewport heights here is the solution for that (note that I couldn't find where you set the exact height for the 'red' and 'blue' box):

.height-450 {
  overflow: auto;
  height: calc(80vh - 100px - 200px);
}

the '100px' would be the given fixed height of the red box and '200px' being the given fixed height of the blue box. 'vh' stands for 'viewport height' where '100vh' is the entire height. And you can use other units than vh and px.

You can control the upper and lower gray space either with deliberate heights of these or just ensure (by the given code) that the content-inner never takes the full height of the viewport. Note that the latter will keep everything inside the given viewport so all content is always visible.

PS Note that a lot of your CSS can be replaced by standard Bootstrap classes.

And CSS calc() https://www.w3schools.com/cssref/func_calc.asp is widely supported https://caniuse.com/#search=calc