title: Fit all Bootstrap content in viewable area
body: <p>I'm attempting to create an application that displays camera images on a page. I've got one page that will have two rows of 3 cameras using the 4 x 4 x 4 layout and that works fine since most screens will fit both rows of cameras. However when I add another row or two I run into an issue where I can't fit all the content on the same page, it always requires scrolling down on a smaller monitor to see the content. Obviously by default my content does shrink when I make my window size smaller but I'm looking for a way to do this automatically whenever my page is loaded. </p>
  
  <p>I've tried doing a <code>&lt;div class="container" style="height: 75%; max-height: 80%"&gt;</code>however that doesn't seem to affect the height at all. </p>
  
  <p>In terms of layout, here is my first row of cameras:</p>
  
  <pre><code>&lt;div class="container" style="height: 75%; max-height: 80%"&gt;
      &lt;div class="row"&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;asp:Image ID="Image1" runat="server" Height="100%" Width="100%" /&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;asp:Image ID="Image2" runat="server" Height="100%" Width="100%" /&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;asp:Image ID="Image3" runat="server" Height="100%" Width="100%" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I've tried setting a <code>&lt;div class="container" style="height: 500px;"&gt;</code>to see if it would manually set the height - which didn't work. I'm using Bootstrap 3.3.6</p>