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; }
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
Post a Comment