This particular code (by the way, taken from another stackoverflow post) is functioning properly as the red div#wrapper extends from top to bottom...
<html>
<head>
<style media="screen">
#wrapper {
height:100%;
width:300px;
background-color:red;
}
#first {
background-color:#F5DEB3;
height: 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="first"></div>
</div>
</body>
</html>
However, when attempting to incorporate this into a WordPress + Bootstrap + Timber theme, it fails to work... even with a html,body{height: 100% } declaration in style.css...
It remains uncertain whether this issue stems from Bootstrap or Wordpress...
hmtl, body{
height: 100%!important;
}
#wrapper {
height:100%!important;
background-color:red;
}
.navbar-brand-image{
margin: 0 auto;
}
@media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
float: none;
text-align: center
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
width: 100%;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
.navbar{
margin-bottom: 0px
}
.navbar .navbar-nav a{
color: #fff;
font-weight: bold
}
.navbar .navbar-nav a:hover{
background-color: rgba(0, 0, 0, 0.2);
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}