title: sap.ui.table.Table "VisibleRowCountMode.Auto" mode does not work
body: <p>I'm having trouble setting the number of rows for a table to automagically fill the available estate of its encapsulating container.</p>
  
  <p><a href="https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.table.VisibleRowCountMode.html" rel="noreferrer">According to the API</a>, setting the <code>visibleRowCountMode</code> property to <code>sap.ui.table.VisibleRowCountMode.Auto</code> should render the table to </p>
  
  <blockquote>
    <p>"[...] automatically fills the height of the surrounding container.
    <strong>The visibleRowCount property is automatically changed accordingly</strong>. All
    rows need the same height, otherwise the auto mode doesn't always work
    as expected."</p>
  </blockquote>
  
  <p>I have used the following code:</p>
  
  <pre><code>var oTable = new sap.ui.table.Table( {
      rowHeight           : 30,
      height              : "100%",
      // The below property is seemingly ignored... What did I do wrong?
      visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto
  });
  </code></pre>
  
  <p>...but as you can see in this jsbin example <a href="http://jsbin.com/vazuz/1/edit" rel="noreferrer">http://jsbin.com/vazuz/1/edit</a> it just shows the default 10 rows, and certainly doesn't "change the visibleRowCount property accordingly" :-(</p>
  
  <p>Anyone has a solution?
  Thanks in advance!</p>
  
  <p>=====================</p>
  
  <p>EDIT: Thanks to @matz3's answer below, I was ultimately able to solve this issue. </p>
  
  <p>Setting the surrounding container DIV to 100%, this seems to be ignored. Setting it to a fixed height, however, worked just fine. But what I really wanted, if a user resized the window, the number of available rows needs to be adjusted accordingly. Setting it to a fixed height is therefor not an option...</p>
  
  <p>However, the trick was in some extra CSS: not only the DIV needed to be set to 100% height, also both BODY and HTML (!!) needed to have a height set to 100%:</p>
  
  <pre><code>html, body {
    height: 100%
  }
  
  div#uiArea {
    height: 100%
  }
  </code></pre>
  
  <p>Now, the table spans the full height of the available viewport, and resizing the window adjusts the table rather nicely. See the final working solution here: <a href="http://jsbin.com/bosusuya/3/edit" rel="noreferrer">http://jsbin.com/bosusuya/3/edit</a></p>
  
  <p>Matz3, thanks for your help!</p>