test.html

<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>

<style>
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;
}

</style>

<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>
    </div>
  </div>
</main>

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