0

I want to set the height of "background" div to 100% of its parent, even when it is larger than the viewport, as in

<!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>

It should be really easy, but I haven't found any way how (tested both in Firefox and Chrome)?

JacobP
  • 561
  • 3
  • 21

1 Answers1

0

you should use "position:relative;" for parent div, test this :

<!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>
ehsan
  • 38
  • 4