Bootstrap fixed header and footer with collapsible sidebar
<p>I'm working on a layout with a fixed header and footer in the content area with a collapsible sidebar. Currently it's working pretty well but there are some small quirks which I can't seem to figure out.</p>

<ol>
<li><p>When the sidebar is toggled shut the body content snaps to it's 100% width and shows a scroll bar on the bottom until it's finished collapsing. I want the content to either have it's width tween like the sidebar or just have overflow-x hidden so it doesn't show the scroll bar at all.</p></li>
<li><p>I want the footer to be a dynamic height. I will be loading different content in there based on database queries and the number of entries I pull will determine the height of the footer. Currently it's locked at 60px.</p></li>
</ol>

<p>As for the first problem, I've tried adding overflow-x hidden to various elements without success. The second problem has been a little more complicated. I've tried some CSS calc() operations but nothing has worked so far.</p>

<p>Here is my code, if you want to test it out you'll need <strong>bootstrap.min.css</strong>, <strong>bootstrap.min.js</strong> and <strong>jquery.js</strong>. I tried setting up a Codepen or Bootply example but it wouldn't work with the collapsible sidebar. </p>

<p>HTML</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;

    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="author" content=""&gt;

    &lt;title&gt;Calendar&lt;/title&gt;

    &lt;!-- Bootstrap Core CSS --&gt;
    &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;

    &lt;!-- Custom CSS --&gt;
    &lt;link href="css/frame.css" rel="stylesheet"&gt;

    &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
    &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
    &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;div id="wrapper"&gt;
        &lt;!-- Sidebar --&gt;
        &lt;div id="sidebar-wrapper"&gt;
            &lt;ul class="sidebar-nav"&gt;
                &lt;li class="sidebar-brand"&gt;
                    &lt;a href="#"&gt;
                        Start Bootstrap
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="#"&gt;Dashboard&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="#"&gt;Shortcuts&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="#"&gt;Overview&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="#"&gt;Events&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="#"&gt;About&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="#"&gt;Services&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="#"&gt;Contact&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- /#sidebar-wrapper --&gt;

        &lt;header&gt;header&lt;/header&gt;
        &lt;!-- Page Content --&gt;
        &lt;div id="page-content-wrapper"&gt;
            &lt;div class="container-fluid"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-lg-12"&gt;

                        &lt;h1&gt;Simple Sidebar&lt;/h1&gt;
                        &lt;p&gt;This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.&lt;/p&gt;
                        &lt;p&gt;Make sure to keep all page content within the &lt;code&gt;#page-content-wrapper&lt;/code&gt;.&lt;/p&gt;
                        &lt;a href="#menu-toggle" class="btn btn-default" id="menu-toggle"&gt;Toggle Menu&lt;/a&gt;

                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /#page-content-wrapper --&gt;
        &lt;footer&gt;footer&lt;/footer&gt;
    &lt;/div&gt;
    &lt;!-- /#wrapper --&gt;

    &lt;!-- jQuery --&gt;
    &lt;script src="js/jquery.js"&gt;&lt;/script&gt;

    &lt;!-- Bootstrap Core JavaScript --&gt;
    &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;

    &lt;!-- Menu Toggle Script --&gt;
    &lt;script&gt;
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
        $("header").toggleClass("toggled");
        $("footer").toggleClass("toggled");
    });
    &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>CSS (from Frame.css)</p>

<pre><code>/* Header Footer Styles */
header {
    width: 100%;
    height: 60px;
    background: red;
    position: fixed;
    top: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
header.toggled {
    width: calc(100% - 250px);
}

footer {
    width: 100%;
    height: 60px;
    background: red;
    position: fixed;
    bottom: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
footer.toggled {
    width: calc(100% - 250px);
}

/* Toggle Styles */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
    overflow-x: hidden;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    margin-top:60px;
    max-height: calc(100% - 120px);
    overflow-y: auto;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
    width: calc(100% - 250px);
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav &gt; .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav &gt; .sidebar-brand a {
    color: #999999;
}

.sidebar-nav &gt; .sidebar-brand a:hover {
    color: #fff;
    background: none;
}
</code></pre>