Home/ Questions/Q 7777729
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T18:12:58+00:00

This should be a pretty simple one. I need the ‘orange’ div to always

  • 0

This should be a pretty simple one. I need the ‘orange’ div to always cover 100% width and 100% height.

Within that div I need the ‘green’ div to also fill 100% width and height of it’s parent, the ‘orange’ div.

Additionally there needs to always be 10px of ‘padding’ inside the ‘orange’ div.

When the window is resized, each div must ‘resize’ respectively so that there are no scrollbars.

http://jsfiddle.net/URwpA/3/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First way:

    #hold {
 position:absolute;
 top:0px;
 left:0px;
 bottom:0px;
 right:0px;
 background:orange;
 padding:10px;
}
#held {
 position:relative;
 width:100%;
 height:100%;
 background:green;
}

    Second way:

    #hold {
 position:absolute;
 top:0px;
 left:0px;
 bottom:0px;
 right:0px;
 background:orange;
}
#held {
 position:absolute;
 top:10px;
 left:10px;
 bottom:10px;
 right:10px;
 background:green;
}

    EDIT: The only way I can think of to achieve a layout that I think is being requested in the comment is as follows:

    <html style="height: 100%;">
  <body style="height: 100%;">
    <table style="height: 100%; width: 100%; border: 10px solid orange; background-color: green;">
      <!-- etc... -->
    </table>
  </body>
</html>
    • 0