絶対divの高さを100％

Question

私は相対位置の親divと絶対位置の子div（左と右）を持っています。

左divはheight: 100%、右divは動的に変化します。今すぐ左にスクロールすると、子供は100％でなく小さくなり、右にはdivの高さがあります。

親divの上部に水平ナビゲーションバーがあります。 bottom: 0、position: fixedで試しましたが、結果は良くありません。

.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

あなたはposition:absoluteを必要としませんが、あなたは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>