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 wi

Answer 1

Until I get a better option, this is the most "bootstrappy" answer I can work out:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/6cbrjrt5/

I have switched to using LESS and including the Bootstrap Source NuGet package to ensure compatibility (by giving me access to the bootstrap variables.less file:

in _layout.cshtml master page

• Move footer outside the body-content container
• Use boostrap's navbar-fixed-bottom on the footer
• Drop the

  ---

  before the footer (as now redundant)

Relevant page HTML:

    @RenderBody()


    
© @DateTime.Now.Year - My ASP.NET Application

In Site.less

• Set HTML and BODY heights to 100%
• Set BODY overflow to hidden
• Set body-content div position to absolute
• Set body-content div top to @navbar-height instead of hard-wiring value
• Set body-content div bottom to 30px.
• Set body-content div left and right to 0
• Set body-content div overflow-y to auto

Site.less

html {
    height: 100%;

    body {
        height: 100%;
        overflow: hidden;

        .container-fluid.body-content {
            position: absolute;
            top: @navbar-height;
            bottom: 30px;
            right: 0;
            left: 0;
            overflow-y: auto;
        }
    }
}

The remaining problem is there seems to be no defining variable for the footer height in bootstrap. If someone call tell me if there is a magic 30px variable defined in Bootstrap I would appreciate it.