修复了带有可滚动导航栏的标题和不在浏览器视口下方的内容

Question

I am trying to create a layout that has a fixed header that always shows at the top. Additionally a side bar that will have a scroll bar next to it if the content goes past the browser height. Same with the content to the right of the side-bar, I would like it to have its own scroll bar that does not go past the browser height.

Please see this site for an example of what I am looking for. It has all 3 features.

I have tried so many things. Without the fixed header I can get it working by simply making everything height: 100%. But with the fixed header something is going on where the sidebar and content pane scroll bars go way below the browser view.

I feel like I am getting somewhere when I add padding-bottom: 64px; to the items I want to have the scroll bar. The 64px is the height of the header.

Answer 1

Please go through the documentation and tutorial of Bootstrap and you will be able to do it.

For reference go through this JSFiddle: https://jsfiddle.net/jxo6pmju/12/

link = https://jsfiddle.net/jxo6pmju/12/

For scrollbar go through this : https://jsfiddle.net/vrzjLc77/1/

link = https://jsfiddle.net/vrzjLc77/1/