Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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/

like image 533
Gone Coding Avatar asked Mar 13 '15 17:03

Gone Coding


People also ask

How do I fix the position of the header and footer in HTML?

Answer: Use CSS fixed positioning You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.

How do I make a sticky footer in bootstrap?

Make Footer Sticky To make your footer stick to the bottom of the viewport, add classes d-flex , flex-column , and h-100 to the body tag. Also add class h-100 to <html> tag.


1 Answers

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:

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;
}
header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-color: #4C4;
    height: 50px;
}
footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4C4;
    height: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid body-content">
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<footer></footer>
like image 126
falsarella Avatar answered Sep 20 '22 15:09

falsarella