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>


Comments

Post a Comment

Popular posts from this blog

How has firefox/gecko HTML+CSS rendering changed in version 38? -

-
i have a little website header no longer renders correctly, since updating firefox 38.0.5 [the faceplant logo missing top right, , main logo no longer centred]. still renders expected in other browsers. how has engine's rendering changed in update? according mdn , list of changes is: css support ruby-position , ruby-align have been added , available default ( bug 1055676 , bug 1123917 , bug 1039006 ). the :unresolved pseudo-class has been implemented custom elements ( bug 1111633 ). the predefined style ethiopic-numeric uses space, instead of dot, suffix match recent change spec ( bug 1120721 ). css transitions on generated content (with ::before , ::after ) on both inline , block splits them start expected specification ( bug 1110277 ). the implementation of css logical properties made big progress. [...] how css transitions start has been modified match recent change of specifications, aiming @ having interoperable behavio...
Read more

c# - Where does the .ToList() go in LINQ query result -

-
when getting data populate data grid, have pulled data, made list , mapped model, this: public list<person> getpeople() { var data = _db.person.tolist(); list<person> people = new list<person>(); foreach (var item in data) { person person = new person() { personid = item.personid, firstname = item.firstname, lastname = item.lastname }; people.add(person); } return people; } this works fine, in interest of writing less code discovered .select method , (what think is) anonymous type. have: public list<person> getpeople() { return _db.person.select(d => new person { personid = item.personid, firstname = item.firstname, lastname = item.lastname }).tolist(); } though not easy read, works fine too. there preference either way? ...
Read more

android - CollapsingToolbarLayout: position the ExpandedText programmatically -

-
i using new android support design view collapsingtoolbarlayout. have need position expandedtitle programmatically. actually way set position expandedtitle in .xml file (example here: https://goo.gl/l5h5fc ) there no public api set text position programmatically , fields private . do know if it's possible without reflection or 'hacky' tricks? i have solved problem exposing properties via reflection ( https://gist.github.com/fpezzato/8e7d45112883dbbc5ffb ), works don't use trick in production code. @google: please no more private or final stuff! :)
Read more