使绝对div高度为100％

Question

I have a parent div with position relative and 2 child divs (left and right) with absolute positioning.

Left div should be of height: 100% and right div content changes dynamically. Now when I scroll left child remains smaller (not 100%) and right div had its height.

There is horizontal navigation-bar on top of parent div. I tried with bottom: 0 , position: fixed , but results are 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;
}

Answer 1

you don't need position:absolute but you need to give height:100% to body / html and .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>