html - 使绝对div高度为100％

Question

我有一个位置相对的父div和绝对定位的2个子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，但需要将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>