JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <body>
    <div class="container">
		<div class="sidebar">
			<div class="sidebar-wrapper">
				<div class="sidebar-content">
					<ul>
						<li>First</li>	
						<li>Link</li>	
						<li>Link</li>	
						<li>Link</li>	
						<li>Link</li>	
						<li>Link</li>	
						<li>Link</li>	
						<li>Link</li>	
						<li>Link</li>	
						<li>Last</li>	
					</ul>
				</div>
				<div class="sidebar-footer">
					Footer
				</div>	
			</div>						
		</div>	
		<div class="content">
			Content
		</div>	
    </div><!-- /.container -->
  </body>

CSS

.sidebar {
    position: absolute;
    overflow: hidden;
    overflow-y: auto;
    background-color: #F5F5F5;
    border-right: 1px solid #ccc;
    height: 100%;
    width: 200px;
    left: 0;
    bottom: 0;
}

.sidebar .sidebar-wrapper {		
    min-height: 100%;
    position: relative;
}

.sidebar .sidebar-content {
    background-color: #F5F5F5;
    padding-bottom: 50px; /* height of the footer */
}

.sidebar ul {
    background-color: #eeeeee;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar .sidebar-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #e0e0e0;
    border-top: 1px solid #ccc;
    text-align: center;
}

.content {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 250ms;
    margin-left: 40px;
}