Bootstrap fixed header and footer with scrolling body-content area in fluid-container

Question

I was surprised I could not find a simple answer to this problem by Googling  but most responses to scrolling content panels either did not work properly  or did not work with bootstrap   Answers like this one have full page scroll-bars  which seems wrong   I am simply trying to have 100  height html and body with no browser scrollbar  but scrolling visible on the body content area only  It needs to behave with bootstrap menu heights etc   So far the only way seems to work  at all  is using absolutely position content and footers elements   html     height  100     html body     height  100     overflow  hidden    html body  container-fluid body-content     position  absolute    top  50px    bottom  30px    right  0    left  0    overflow-y  auto     footer       position  absolute      left  0      right  0      bottom  0      height  30px      But this just seems the wrong way to go about it and seems to impact Bootstrap layouts negatively  For instance  if the menu line wraps to two lines  the content area goes under the nav-bar div   Can any please tell me the correct way to go about this styling  that is compatible with an out-of-the-box MVC Razor Bootstrap application   Notes    It needs to work with IE8 onwards  It needs to work with Bootstrap  so if Boostrap is adjusted  header footer sizes  then it will correct itself too    Update   Here is a JSFiddle to work with  including my latest solution from answer below    JSFiddle  http   jsfiddle net TrueBlueAussie 6cbrjrt5

User · Answer

Add the following css to disable the default scroll:

body {
    overflow: hidden;
}

And change the #content css to this to make the scroll only on content body:

#content {
    max-height: calc(100% - 120px);
    overflow-y: scroll;
    padding: 0px 10%;
    margin-top: 60px;
}

See fiddle here.

Edit:

Actually, I'm not sure what was the issue you were facing, since it seems that your css is working. I have only added the HTML and the header css statement:

_x000D_

html {_x000D_
  height: 100%;_x000D_
}_x000D_
html body {_x000D_
  height: 100%;_x000D_
  overflow: hidden;_x000D_
}_x000D_
html body .container-fluid.body-content {_x000D_
  position: absolute;_x000D_
  top: 50px;_x000D_
  bottom: 30px;_x000D_
  right: 0;_x000D_
  left: 0;_x000D_
  overflow-y: auto;_x000D_
}_x000D_
header {_x000D_
    position: absolute;_x000D_
    left: 0;_x000D_
    right: 0;_x000D_
    top: 0;_x000D_
    background-color: #4C4;_x000D_
    height: 50px;_x000D_
}_x000D_
footer {_x000D_
    position: absolute;_x000D_
    left: 0;_x000D_
    right: 0;_x000D_
    bottom: 0;_x000D_
    background-color: #4C4;_x000D_
    height: 30px;_x000D_
}

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<header></header>_x000D_
<div class="container-fluid body-content">_x000D_
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
</div>_x000D_
<footer></footer>

_x000D_

Bootstrap fixed header and footer with scrolling body-content area in fluid-container

The Solution to Bootstrap fixed header and footer with scrolling body-content area in fluid-container is

Most Viewed Questions: