Geek asks and answers

Div inside another div (css positioning)

It should be pretty simple. I need an “orange” div to always cover 100% width and 100% height.

In this div, I need a “green” div to also fill 100% the width and height of its parent, “orange” div.

In addition, the “orange” div should always have 10px “padding”.

When the window is resized, each div must “resize” accordingly so that there are no scroll bars.

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

+3
source share
2 answers

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;
}

The 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;
}

: , , , , , , :

<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>
+6

, - ?

#hold {
position:fixed;
background:orange;
width:100%;
height:100%;
padding:10px;
}
#held {
position:relative;
width:100%;
height:100%;
background:green;
}
0

More articles:


All Articles