无法在100％高度调整div

Question

我需要在视口的100％高度处设置高红色div。

我当前的代码无法按预期工作（请滚动div），因为您可以看到它无法正确缩放。

• 怎么解决？
• 问题是什么？

#root {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
}

.item {
  height: 600px;
  background-color: blue;
}

#a {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: yellow;
}

#b {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  padding: 10px;
  background-color: red;
}

<div id="root">
  <div id="a">
    <div class="item">
    </div>
    <input type="text" name="firstname"><br>
    <div class="item">
    </div>
  </div>
  <div id="b">
  </div>
</div>

Answer 1

您的红色div已占据屏幕的100％

但如果你的意思是100％= 2蓝色div试试这个：

你应该计算蓝色高，并给它红色

#root {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
}

.item {
  widht: 200px;
  height: 100vh;
  background-color: blue;
}

#a {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: yellow;
}

#b {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 200vh;
  padding: 10px;
  background-color: red;
}

<div id="root">
  <div id="a">
    <div class="item">
    </div>
    <input type="text" name="firstname"><br>
    <div class="item">
    </div>
  </div>
  <div id="b">
  </div>
</div>

Answer 2

如果您被允许使用jQuery，您可以这样做：

$("#root").on("scroll", function() {
    $("#b").css("top", $("#root")[0].scrollTop + "px");
});

让你的div始终在眼前。

小提琴：https://jsfiddle.net/w3u8np46/10/