I am currently working on a page that features the following HTML structure:
<html>
<head>...</head>
<body>
<div class="container">
<header>...</header>
<div class="wrapper">
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-3 col-md-offset-1 col-aside">
<aside>...</aside>
</div>
</div>
</div>
</div>
</body>
</html>
I have set the height to 100% for the following elements:
html, body, body > .container {
height: 100%;
}
.wrapper {
min-height: 100%;
}
.wrapper > .row {
min-height: 100%;
}
.col-aside {
min-height: 100%;
}
However, when inspecting the page with Chrome Developer Tools, I noticed that .row and .col-aside are not achieving the desired 100% height. Despite seeing solutions involving display: table, I would prefer to avoid this method since I was able to create the layout using simple divs without Bootstrap.
Can anyone provide guidance on how to ensure both columns have a minimum height of 100% without relying on display: table or position: absolute?
Update: Check out this jsfiddle link for reference: http://jsfiddle.net/U6H6W/. Here you can observe that while the .wrapper achieves 100% height, the .row does not.