将 div 设置为父级的 100% 高度，即使视口大于父级

Question

我想将“背景”div 的高度设置为其父项的 100%，即使它大于视口，如

<!DOCTYPE html>
<html style="height:100%; margin:0; padding:0">
  <body style="height:100%; margin:0; padding:0">

    <div style="height:2000px; margin:0; padding:0; background-color:red">
      // Background div.
      <div style=" position:absolute; top:0; height:100%; width:100%; min-width:100%; background-color:blue">
      </div>

      // More divs with content on top.

    </div>
  </body>
</html>

应该很简单，但我还没有找到任何方法（在 Firefox 和 Chrome 中测试过）？

Answer 1

你应该使用“position:relative;” parent div, 测试一下：

<!DOCTYPE html>
<html style="height:100%; margin:0; padding:0">
  <body style="height:100%; margin:0; padding:0">

    <div style="position:relative; height:2000px; margin:0; padding:0; background-color:red">
      // Background div.
      <div style=" position:absolute; top:0; height:100%; width:100%; min-width:100%; background-color:blue">
      </div>

      // More divs with content on top.

    </div>
  </body>
</html>

将 div 设置为父级的 100% 高度，即使视口大于父级

Set div to 100% height of parent even when viewport is larger than parent

html

css

height

viewport