Structure bootstrap grid with fixed width AND height of all rows and columns [on hold]

I need to create a fixed framework for my application. It needs to sit in either a 720p or 1080p (1080p preferred if I have to choose only one).

This application is to be used on a TV only and in Kiosk Mode.

It need to have 3 rows each with 2 columns (3rd row columns are different to rows 1 & 2).

Here is the HTML I have:

<div class="container-fluid">

    <div class="row tv-layouts-top">
      <div class="col-md-8 tv-layouts-contenttop panel-panel">
        <div class="panel-panel-inner">
          <!-- contenttop -->
        </div>
      </div>
      <div class="col-md-4 tv-layouts-sidebartop panel-panel">
        <div class="panel-panel-inner">
          <!-- sidebartop -->
        </div>
      </div>
    </div>

    <div class="row tv-layouts-bottom">
      <div class="col-md-8 tv-layouts-contentbot panel-panel">
        <div class="panel-panel-inner">
          <!-- contentbot -->
        </div>
      </div>
      <div class="col-md-4 tv-layouts-sidebarbot panel-panel">
        <div class="panel-panel-inner">
          <!-- sidebarbot -->
        </div>
      </div>
    </div>

     <div class="row tv-layouts-footer">
      <div class="col-md-2 tv-layouts-footerleft panel-panel">
        <div class="panel-panel-inner">
          <!-- footerleft -->
        </div>
      </div>
      <div class="col-md-10 tv-layouts-footerright panel-panel">
        <div class="panel-panel-inner">
          <!-- footerright -->
        </div>
      </div>
    </div>

  </div>

I have the obvious Bootstrap 3 CSS

I need all the height and widths to be fixed so the relationship stays the same either on 1080p or 720p.

Can I please get some advice on the best way to do this. I found a few articles that talked about height with vh but there's not much on this to know if it's the best method.

Thanks C