Bootstrap fluid heights on sections with columns - css

Question

I'm building a site that has two section sizes.
The sizes are:
Full screen (height: 100%;)
Half screen (height: 50%;)
See screenshots:
Note the section with three columns (green, pink, blue).
This works before the columns collapse at col-md-4.
Once the columns collapse, they overflow their container (height: 50%) and then theres 3 columns at 50% height (150%) the extra 100% covers up the last section (100%).
How can I get the height to expand if the container overflows?
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #fff4fd;
}
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
.wrapper .content {
height: 100%;
width: 100%;
}
.home {
background-color: red;
background-attachment: fixed;
}
.what-we-do {
background-color: blue;
}
.our-work {
background-color: #93A8FF;
}
.our-ethos {
background-color: yellow;
}
.case-studies .row {
height: 100%;
margin: 0;
}
.case-studies .row > div {
height: 100%;
}
.case-studies .row > div.case-study-1 {
background-color: #D1F3F0;
}
.case-studies .row > div.case-study-2 {
background-color: #FFEBF1;
}
.case-studies .row > div.case-study-3 {
background-color: #D7EEF9;
}
.page.page-full {
height: 100%;
}
.page.page-half {
height: 50%;
}
/*# sourceMappingURL=app.css.map */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="bower_components/modernizr/modernizr.js"></script>
<div class="wrapper">
<div class="content">
<div class="page page-full home"></div>
<div class="page page-half what-we-do"></div>
<div class="page page-half our-work"></div>
<div class="page page-half case-studies">
<div class="row">
<div class="col col-md-4 case-study-1"></div>
<div class="col col-md-4 case-study-2"></div>
<div class="col col-md-4 case-study-3"></div>
</div>
<div class="cleafix"></div>
</div>
<div class="cleafix"></div>
<div class="page page-full our-ethos clearfix"></div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
See screenshot: