twitter bootstrap - CSS height: 100% not working in html or body -


i'm trying make content in page fill remaining screen size. page has header , content 2 divs, both needing scrollable. i've tried few solutions , best i've come using flexbox , using css calc set height.

but height of flexbox still height of content. other answers said set body , html tags height 100%. doesn't work either, , inspect page height not being inherited. suspect may problem, don't know answer be.

i'm using bootstrap , using box-sizing fix issues has bootstrap, may issue.

my flexbox css:

html, body {   height: 100%;   /* setting height: 100vh doesn't work either   height: 100vh;   */   margin: 0 }  body {     background: none repeat scroll 0 0;     padding-top: 105px; }  /* header 102px high , using calc set remaining height */ .flex-box {     display: flex;     height: -moz-calc(100% - 102px);     height: -webkit-calc(100% - 102px);     height: calc(100% - 102px); }  .left {     flex: 1;     order: 1;     overflow: auto;     background:red; }  .right {     flex: 1;     order: 2;     overflow:auto;     background:green; }  /* fix bootstrap box issues in slickgrid */ *, *:before, *:after {   -webkit-box-sizing: content-box;      -moz-box-sizing: content-box;           box-sizing: content-box; } .container .row *, .container .row *:before, .container .row *:after {   -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;           box-sizing: border-box; }

edit: adding html:

<div class="flex-box">     <div class="left">         <div ui-tree="treeoptions" id="tree-root">             <ol ui-tree-nodes="" ng-model="root.items">                 <li data-ng-repeat="item in root.items"                     ui-tree-node                     data-ng-include="'angulartree.html'"></li>             </ol>         </div>     </div>     <div class="right">         <slickgridjs id="data-grid"></slickgridjs>     </div> </div>

edit: heres jsfiddle css i'm using, , more complete html.

https://jsfiddle.net/w48567c6/

how can make flexbox use entire remaining screen height?

instead of messing height: calc(100% - something), suggest using flexbox everywhere!

html, body, .main-container, .main-container > div, .flex-box {   display: flex;      /* flexbox everywhere! */   flex: 1;            /* fill available space */ } html { height: 100% } /* fill window */ body { margin: 0 }    /* kill annoying margins */ .left, .right {   flex: 1;            /* fill available space */   overflow: auto;     /* in case content tall */ } 

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css';  html, body, .main-container, .main-container > div, .flex-box {    display: flex;    flex: 1;  }  html { height: 100% }  body { margin: 0 }  .header {    background: lime;    height: 50px;  }  .left, .right {    flex: 1;    background: aqua;    overflow: auto;  }  .right {    background: yellow;  }    /* fix bootstrap box issues in slickgrid */  *,  *:before,  *:after {    -webkit-box-sizing: content-box;    -moz-box-sizing: content-box;    box-sizing: content-box;  }  .container .row *,  .container .row *:before,  .container .row *:after {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;  }      /* adding other css have in case */  body {    background: none repeat scroll 0 0;    padding-top: 105px;  }    /* nav-pills custom styling */  .nav > li > {    padding: 5px 15px;  }    .nav > li > .separator {    padding: 5px 15px;    color: #428bca;    display: block;    position: relative;  }    /* fix cursor point in angular bootstrap */  .nav, .pagination, .carousel, .panel-title {    cursor: pointer;  }    .nav {    margin-top: 10px;  }    .no-top-margin {    margin-top: 0px !important;  }    .action-bar {    top: 50px;    z-index: 999;  }    #main-container {    width: 100%;    display: inline-block;  }    input.editor-text {    background: none repeat scroll 0 0 transparent;    border: 0 none;    height: 100%;    margin: 0;    outline: 0 none;    padding: 0;    width: 100%;  }    .hide {    display: none !important;  }    .col-sm-7 {    padding-left: 0px !important;    padding-right: 0px !important;  }    .form-signin {    max-width: 330px;    padding: 15px;    margin: 0 auto;  }    .form-signin #username {    margin-bottom: -1px;    border-bottom-right-radius: 0;    border-bottom-left-radius: 0;  }    .form-signin #userpassword {    margin-bottom: 10px;    border-top-left-radius: 0;    border-top-right-radius: 0;  }    .form-signin .form-control {    position: relative;    height: auto;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;    padding: 10px;    font-size: 16px;  }    div.personal-tools {    margin-top: 10px;  }    /* centering nav-bar pagination */  .nav-center {    display: table;    margin: 0 auto;  }    /* styling tree in modal */  span.order-tree-node {    font-weight:bold;    background-color: transparent;    background-repeat:no-repeat;    border: none;    outline:none;    cursor:pointer;  }    div.order-tree-content{    display:inline-block;    cursor: pointer;  }    button.custom-checkbox{    background-color: transparent;    background-repeat:no-repeat;    border: none;    outline:none;  }    .align-right {    float: right;  }    i.checkbox-icon {    background-color: white;  }    li.order-filters {    width: 10%;    float:right;  }    /* overwriting bootstrap in table */  .currency {    text-align: right;  }    .table {    cursor: pointer;  }
<div class="main-container">    <nav class="navbar navbar-default navbar-fixed-top">      <div class="container-fluid">        <div class="btn-group pull-right personal-tools">          <a class="btn dropdown-toggle">first header</a>        </div>      </div>    </nav>    <div>      <nav class="navbar navbar-default navbar-fixed-top action-bar">        <div class="container-fluid">          <ul class="nav nav-pills">            <li><a class="project-button"> second header</a></li>            <li><a>second header</a></li>          </ul>        </div>      </nav>      <div class="flex-box">        <div class="left">          <ol ui-tree-nodes="" ng-model="root.items">            <li>list item</li>            <li>list item</li>            <li>list item</li>            <li>list item</li>            <li>list item</li>            <li>list item</li>            <li>list item</li>            <li>list item</li>            <li>list item</li>            <li>list item</li>          </ol>        </div>        <div class="right">          necessitatibus omnis minus, ea, odit saepe recusandae delectus dolore, libero magnam sunt maxime laborum. est praesentium aperiam officiis assumenda id corporis eos eveniet debitis, eius deserunt facilis, fuga! sint, similique!        </div>      </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

c# - Validate object ID from GET to POST -

i have method allows user access comment have made on site. have post method lets them update comment. my normal solution send entire comment model through, let them update it, update on database when post back. involve sending commentid through in hiddenfor , can manipulated. how can verify commentid sent in get method same i'm getting in post , not able alter comment wish? how can verify commentid sent in method same i'm getting in post? basically have validate following things in post - user logged-in user. authenticated users post comments. commentid in post , should valid commentid , should present in database. userid associated logged-in user should same userid associated comment . comment should contain userid column, can check @ time of update. to make sure update happens comment has been sent in get - hold commentid in session , in post action compare commentid value in session .
Read more

node.js - Custom Model Validator SailsJS -

when using custom model validator checks record within model. return within spread doesn't seem end control flow. //post.js model /** * custom validator **/ types: { isuservalid: function(user_id) { var promise = require('bluebird'); promise.all([ user.findone({id: user_id}) ]) .spread(function(user) { console.log(user); if (user === null || user === undefined) { console.log('failed'); return false; }else{ console.log('passed'); return true; } }); } }, my response standard validation failed response. { "error": "e_validation", "status": 400, "summary": "1 attribute invalid", "model": "post", "invalidattributes": { "owner": [ { "rule": "isuservalid", ...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more