All you have to do is have a height of 100vh on your main container/wrapper, and then set height 100% or 50% for child elements.. depending on what you’re trying to achieve. I tried to copy your mock up in a basic sense.
In case you want to center stuff within, look into flexbox. I put in an example for you.
You can view it on full screen, and resize the browser and see how it works. The layout stays the same.
.left {
background: grey;
}
.right {
background: black;
}
.main-wrapper {
height: 100vh;
}
.section {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.half {
background: #f9f9f9;
height: 50%;
width: 100%;
margin: 15px 0;
}
h4 {
color: white;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="main-wrapper">
<div class="section left col-xs-3">
<div class="half"><h4>Top left</h4></div>
<div class="half"><h4>Bottom left</h4></div>
</div>
<div class="section right col-xs-9">
<h4>Extra step: center stuff here</h4>
</div>
</div>