Check out this JS Fiddle: https://jsfiddle.net/wqbn6pe6/2/
This is a simple side navigation, but the grid layout is causing the sidebar not to stretch to the bottom even though it's set at 100% height.
Any suggestions or solutions?
Here's the code snippet:
HTML:
<div class="sidenav right">
<div class="nav active"><div class="icon fa fa-home"></div><div class="description">Home</div></div>
<div class="nav"><div class="icon fa fa-database"></div><div class="description">About</div></div>
<div class="nav"><div class="icon fa fa-users"></div><div class="description">Clients</div></div>
</div>
<div class="col-md-12">
<span class="toggler active" data-toggle="grid"><span class="entypo-layout"></span></span>
<span class="toggler" data-toggle="list"><span class="entypo-list"></span></span>
<ul class="surveys grid">
<li class="survey-item">
<span class="survey-country list-only">
UK
</span>
<span class="survey-name">
UK Beer May 2014
</span>
.... (omitted for brevity)
CSS:
@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
* {
font-family: Roboto;
}
/* Additional CSS styles.... */
Sincerely,
Sam