title: Can you force all rows to show on screen?
body: <p>I have a simple bootstrap application, I don't have a problem with the columns width but the row size is bugging me. Is there a way to change the height of rows? I've tried using </p>
  
  <pre><code>.row {
       height: 20px;
  }
  </code></pre>
  
  <p>and it's just too static, I've got rows of varying height and this just confuses things. Ideally, I'd like a table that when you add new rows to it, it resizes and all rows fit on the screen. But I'd happily settle for if I'm on a big screen 20 rows show, if I'm on a smaller screen 10 rows show. So far, all screens show the same amount of rows.</p>
  
  <p>The razor code that generates the table:</p>
  
  <pre><code>                    foreach (var order in Model)
                      {
                          &lt;div class="row order row-height item-row" id="orderid"&gt;
                              &lt;div class="col-md-3 text-center order-text"&gt;
                                  &lt;p&gt;@order.TimeOrdered&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-3 text-center order-text"&gt;
                                  &lt;p&gt;@order.Orderer&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-3 text-center order-text"&gt;
                                  &lt;p&gt;@order.Destination&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-3 text-center order-text"&gt;
                                  &lt;p class="status"&gt;@order.Remarks1&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;hr /&gt;
                          &lt;/div&gt;
  
                      }
  </code></pre>
  
  <p>Thank you in advance for any help/guidance.</p>