Search code examples
htmlcssheightviewport

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

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)?

Solution

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