html - Make absolute div height 100% -


i have parent div position relative , 2 child divs (left , right) absolute positioning.

left div should of height: 100% , right div content changes dynamically. when scroll left child remains smaller (not 100%) , right div had height.

there horizontal navigation-bar on top of parent div. tried bottom: 0, position: fixed, results not good.

.left-sidebar {     font-weight: 400;     background-color: #b3e5fc;     display:inline-block;     width: 29%;     left: 0;     z-index: 2;     box-shadow: 5px 10px 10px 0px grey;     height: 92vh;     position: absolute; }  .right-content{     display: inline-block;    // height: 100%;     position: absolute;     left:0;     right: 0;     padding: 1em;     min-width: 66%; }  .main-parent {     position: relative; } 

enter image description here

you don't need position:absolute need give height:100% body/html , .main-parent

* {    box-sizing: border-box  }  body,  html {    margin: 0;    height: 100%  }  .main-parent {    height:100%  }  .left-sidebar {    font-weight: 400;    background-color: #b3e5fc;    display: inline-block;    vertical-align:top;    width: 29%;    box-shadow: 5px 10px 10px 0px grey;    height: 100%;  }  .right-content {    display: inline-block;    height: 100%;    padding: 1em;    min-width: 66%;    background:red  }
<div class="main-parent">    <div class="left-sidebar">asda</div>    <div class="right-content">dsdf</div>  </div>


Comments

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

java - Digest auth with Spring Security using javaconfig -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -