Left sidebar same height as content area, footer at bottom of browser window

Question

I'm having some difficulties creating a layout with Bootstrap 3.3.7.

I've set up a fiddle to show what I've got: https://jsfiddle.net/b8ukxb41/5/

There are 3 issues with what I have which I can't seem to resolve:

1. I want the left hand navigation menu (outlined with the red border) to be the same height as the content area (outlined with the blue border).

2. The footer should always be at the "bottom" of the browser window, regardless of how much content is inside the content area. I do not want a sticky footer - if a scrollbar appears in the browser the footer should always be at the bottom of the browser window, not appear sticky.

3. If there is a large amount of content in the content area, it should have a scroll bar on the right hand side. However the left hand navigation menu should remain in a fixed position.

The closest thing I can describe this to is like Gmail where you can scroll down the list of messages on the right, but the folder navigation on the left remains in a fixed position - and that the left column goes all the way down to the bottom of the browser window.

I've tried the following to resolve the issues, but none of these solutions work:

1. Using display: flex; on the container with the green border, i.e. <div class="container-fluid" style="border:1px solid green; display: flex;">. This doesn't seem to do anything. I based this on information in How can I make Bootstrap columns all the same height?

2. I've tried using the following CSS for the footer:

    footer {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
    }
   

The trouble with this is that sometimes the footer appears "inside" the navigation menu with the red border. It only appears right at the bottom of the browser window if you've scrolled right to the bottom of the window.

3. I don't know how to do this although the effect I'm going for is as per what's shown here: https://codepen.io/sass-munch/pen/YerOLG

The overall thing I'm trying to achieve is summarised by this diagram: The red bordered nav should be the same height as the blue bordered content area. The header should be fixed. The footer should always appear at the bottom of the browser window - irrespective of how much content there is in the blue content area:

Answer 1

I can't speak for issues 2) and 3), but a quick glance tells me your #sidebar has a "margin-top: 10px;" rule on it. Remove this rule to make the red and blue boxes start at the same height.

Answer 2

Without flexbox according to the given HTML

• Set a height for footer, e.g. 50px.

• Main content, sidebar and .content on the right side:

  height: calc(100vh - 100px) (50px navbar height and 50px footer height).

• Set .content on the right side overflow-y: auto.

Example

main,
main aside,
main .content {
  height: calc(100vh - 100px);
}

main {
  margin-top: 50px;
}

main aside,
main .content {
  padding: 15px 0;
}

main aside {
  background: red;
}

main .content {
  overflow-y: auto;
  background: blue;
}

.footer {
  height: 50px;
  line-height: 50px;
  background: #F8F8F8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="navbar navbar-fixed-top navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <!-- /.nav-collapse -->
  </div>
  <!-- /.container -->
</div>
<!-- /.navbar -->

<main>
  <div class="container-fluid">
    <div class="row">
      <aside class="hidden-xs col-sm-3">
        <ul>
          <li>List 1</li>
          <li>List 2</li>
          <li>List 3</li>
          <li>List 4</li>
          <li>List 5</li>
        </ul>
      </aside>
      <div class="content col-sm-9">
        <div class="jumbotron">
          <a href="#" class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a>
          <h1>test</h1>
          <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
        </div>
        <div class="col-xs-12">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML,
            CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div>
        <div class="col-xs-12">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML,
            CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div>
        <div class="col-xs-12">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML,
            CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div>
        <div class="col-xs-12">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML,
            CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div>
      </div>
    </div>
  </div>
</main>

<footer class="footer">
  <div class="container-fluid">
    Footer
  </div>
</footer>

Answer 3

The red bordered nav should be the same height as the blue bordered content area. The header should be fixed. The footer should always appear at the bottom of the browser window - irrespective of how much content there is in the blue content area:

Flexbox can do that.

Codepen Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.container {
  height: 100vh;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
}

header {
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: grey;
  color: white;
  text-align: center;
  padding: 1em;
}

.content {
  flex: 1;
  display: flex;
}

aside {
  flex: 0 0 200px;
  background: red;
  overflow-y: auto;
  padding: .5em;
}

main {
  flex: 5;
  background: blue;
  overflow-y: auto;
}

.mini-spacer {
  height: 500px;
}

.spacer {
  height: 1000px;
}

footer {
  height: 50px;
  width: 100%;
  background: grey;
  color: white;
  text-align: center;
  padding: 1em;
}

<div class="container">
  <header>HEADER</header>
  <div class="content">
    <aside>
      <div class="mini-spacer"></div>
    </aside>
    <main>
      <div class="spacer">
      </div>
    </main>
  </div>
  <footer>FOOTER</footer>

</div>