title: HTML/CSS/Blazor Fixed Buttons above and below list which needs to fill remaining space
body: <p>I have an app built in blazor for a shopping list.
  The UI is composed of the default blazor template tab,
  an Add Item button at the top and a Finished shopping button at the bottom.
  Between the 2 buttons I want the remaining space to be taken up by a list of custom components.</p>
  <p>I do not know how to get the height of the list set to the remaining space on the page.</p>
  <p>Closest I have gotten is by setting the size of the list container to 100vh - 140pixels where 140pixels is the size of the buttons.</p>
  <p>As the nav tab appears on the top for narrow screens and the left for wide screens I can't just hardcode in the value for it.</p>
  <p>I would also prefer if this didn't rely on me hardcoding this as well.</p>
  <p>I have tried setting the container height to 100% but that is just giving it no limit.</p>
  <p>The list is in a div with the overflow-auto class from bootstrap.</p>
  <p>The code</p>
  <pre><code>   &lt;body style=&quot;height:100%&quot;&gt;
      &lt;div style=&quot;&quot;&gt;
  
          &lt;div style=&quot;&quot;&gt;
              &lt;button class=&quot;btn btn-primary&quot; style=&quot;margin-bottom: 10px; width:100%;&quot; @onclick=&quot;AddItem&quot;&gt;Add Item &lt;span class=&quot;oi oi-plus&quot; style=&quot;margin-left: 5px;&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; &lt;/button&gt;
  
          &lt;/div&gt;
          &lt;div class=&quot;overflow-auto&quot; style=&quot;height: calc(100vh - 140px);&quot;&gt;
              @foreach (var item in _shoppingItems)
              {
                  &lt;ShoppingItemComponent Item=&quot;@item&quot; DeleteItem=&quot;DeleteItem&quot; BoughtToggle=&quot;UpdateItem&quot; &gt;&lt;/ShoppingItemComponent&gt;
              }
          &lt;/div&gt;
          &lt;div style=&quot;&quot;&gt;
              &lt;button class=&quot;btn btn-primary&quot; style=&quot;width:100%;&quot; @onclick=&quot;ClearList&quot;&gt;Shopping Done&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  <p>You can see it running here, although note I am fiddling with it there so it may not match exactly with the styling in this question.
  <a href="https://smartshoppingapp.azurewebsites.net/" rel="nofollow noreferrer">https://smartshoppingapp.azurewebsites.net/</a></p>
  <p>I have found some solutions around stack overflow around the problem, however I cannot get them working within my solution, I think all of the blazor boilerplate divs and bodies etc that wrap around my page are preventing the 100% height working as intended. i.e index.html and mainlayout.razor</p>