html - set height in CSS to get to the bottom of the viewport from the middle of the page -

is possible? have following layout:

<div class="toolbar"> </div>  <div class="dates-bar"> </div>  <div class="search-bar"> </div>  <div class="scroll-view">     <table class="table-view">         <tr><td>...</td></tr>     </table> </div> 

i need scroll-view go stretch bottom of viewport, scroll if number of rows * height of row overflow scroll-view.

that way can keep blocks above scroll-view "fixed". can't use fixed position elements because inside container , container uses flexbox, don't have width , height.

my attempts have been "height: 100%" , "height: 100vh" need "calc(100% - height(.search-bar) - height(.dates-bar) - height(.toolbar)"

what can ? don't want use javascript that. if possible flexbox, use it.

edit: here fiddle of problem: http://jsfiddle.net/c38p8e70/

i think you're trying do.

body {margin:0;}  div {    height: 50px;    background: blue;  }    .scroll-view {    position: absolute;    height: 100%;    width: 100%;    background: yellow;    overflow: auto;  }

<div class="toolbar">    </div>    <div class="dates-bar">    </div>    <div class="search-bar">    </div>    <div class="scroll-view-wrapper">    <div class="scroll-view">      <table class="table-view">        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>        <tr>          <td>...</td>        </tr>      </table>    </div>  </div>