make main container use 100% of height

Question

I have a simple admin layout (pinched from here https://getbootstrap.com/docs/4.0/examples/dashboard/)

I want to set a background for the main continer, but the background is only the same heigh as the children in it.

I have created a fiddle demoinh this, I have see the background color to blue to highlight what I mean.

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4 content-site" style="background-color:blue;" >
   <div id="reviewVue">
      <form method="POST" action="    //localhost:3032/review" accept-charset="UTF-8" id="reviewForm">
      <input name="_token" type="hidden" value="pbDrPlEI2EGRlzSkgIk1u9f1UGYgyC9dleSLTFbR">
      <div class="row">
         <div class="col-sm-12">
            <div class="card card-info">
               <div class="card-header">Provide Feedback</div>
               <div class="card-body">
                  <review-form></review-form>
               </div>
            </div>
         </div>
      </div>
   </div>
   </div>
   ;
</main>
</div>

http://jsfiddle.net/aq9Laaew/138510/

I only have basic css skills, I have tried seeting min heights etc.

Any input would be great.

Thanks

Jamie