SyntaxFix

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

Another option would be using flexbox.

While it's not supported by IE8 and IE9, you could consider:

  • Not minding about those old IE versions
  • Providing a fallback
  • Using a polyfill

Despite some additional browser-specific style prefixing would be necessary for full cross-browser support, you can see the basic usage either on this fiddle and on the following snippet:

_x000D_
_x000D_ 
html {_x000D_
  height: 100%;_x000D_
}_x000D_
html body {_x000D_
  height: 100%;_x000D_
  overflow: hidden;_x000D_
  display: flex;_x000D_
  flex-direction: column;_x000D_
}_x000D_
html body .container-fluid.body-content {_x000D_
  width: 100%;_x000D_
  overflow-y: auto;_x000D_
}_x000D_
header {_x000D_
    background-color: #4C4;_x000D_
    min-height: 50px;_x000D_
    width: 100%;_x000D_
}_x000D_
footer {_x000D_
    background-color: #4C4;_x000D_
    min-height: 30px;_x000D_
    width: 100%;_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_
_x000D_
_x000D_

Examples related to html

• Embed ruby within URL : Middleman Blog • Please help me convert this script to a simple image slider • Generating a list of pages (not posts) without the index file • Why there is this "clear" class before footer? • Is it possible to change the content HTML5 alert messages? • Getting all files in directory with ajax • DevTools failed to load SourceMap: Could not load content for chrome-extension • How to set width of mat-table column in angular? • How to open a link in new tab using angular? • ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to css

• need to add a class to an element • Using Lato fonts in my css (@font-face) • Please help me convert this script to a simple image slider • Why there is this "clear" class before footer? • How to set width of mat-table column in angular? • Center content vertically on Vuetify • bootstrap 4 file input doesn't show the file name • Bootstrap 4: responsive sidebar menu to top navbar • Stylesheet not loaded because of MIME-type • Force flex item to span full row width

Examples related to asp.net-mvc

• Using Lato fonts in my css (@font-face) • Better solution without exluding fields from Binding • Vue.js get selected option on @change • You must add a reference to assembly 'netstandard, Version=2.0.0.0 • How to send json data in POST request using C# • VS 2017 Metadata file '.dll could not be found • The default XML namespace of the project must be the MSBuild XML namespace • How to create roles in ASP.NET Core and assign them to users? • The model item passed into the dictionary is of type .. but this dictionary requires a model item of type • How to use npm with ASP.NET Core

Examples related to twitter-bootstrap

• Bootstrap 4: responsive sidebar menu to top navbar • CSS class for pointer cursor • How to install popper.js with Bootstrap 4? • Change arrow colors in Bootstraps carousel • Search input with an icon Bootstrap 4 • bootstrap 4 responsive utilities visible / hidden xs sm lg not working • bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js • Bootstrap 4 - Inline List? • Bootstrap 4, how to make a col have a height of 100%? • Bootstrap 4: Multilevel Dropdown Inside Navigation

Examples related to less

• Bootstrap fixed header and footer with scrolling body-content area in fluid-container • Is it possible to use vh minus pixels in a CSS calc()? • "Please try running this command again as Root/Administrator" error when trying to install LESS • How to use font-awesome icons from node-modules • Double border with different color • Disable LESS-CSS Overwriting calc() • Use table row coloring for cells in Bootstrap • Understanding Bootstrap's clearfix class • How to use if statements in LESS • Calculating width from percent to pixel then minus by pixel in LESS CSS