Can't Prevent Nested Div's from Overflowing when using Percent Sizes and Padding in CSS?

I want to be able to layout nested divs with these properties:

width: 100%
height: 100%
padding: 10px

I want it to be such that, the children are 100% width and height of the remaining space after padding is calculated, not before. Otherwise, when I have a document like the below example, the child makes the scrollbars appear. But the scrollbars are not the main issue, the fact that the child stretches beyond the width of the parent container is.

I can use all position: absolute declarations, but that doesn't seem right. Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <title>Liquid Layout</title>
    <style>
      body, html {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
        background-color:black;
      }
      #container {
        position:relative;
        width:100%;
        height:100%;
        background-color:red;
        opacity:0.7;
      }
      #child1 {
        position:relative;
        width:100%;
        height:100%;
        padding:10px;
        background-color:blue;
      }
      #nested1 {
        position:relative;
        background-color: white;
        width:100%;
        height:100%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="child1">
        <div id="nested1"></div>
      </div>
    </div>
  </body>
</html>

How do I make it so, using position:relative or position:static, and percent sizes, the percents size the children according to the parent's width/height minus padding and margins? Do I have to resort to position:absolute and left/right/top/bottom?

Thanks for the help, Lance

I want it to be such that, the children are 100% width and height of the remaining space after padding is calculated, not before.

The shiny futuristic way to do that is:

#something {
    width: 100%; height: 100%; padding: 10px;
    box-sizing: border-box; -moz-box-sizing: border-boz; -webkit-box-sizing: border-box;
}

However this won't work on IE before version 8.

Do I have to resort to position:absolute and left/right/top/bottom?

That's another way, but ‘edge positioning’ (positioning top and bottom but not height, and similarly for left/right/width) won't work on IE before version 7.

the scrollbars are not the main issue, the fact that the child stretches beyond the width of the parent container is.

Horizontally it's not a problem. Leave width at default auto and it will receive the full width of its parent minus the paddings. The only problem is you don't get that behaviour with height.

A hybrid approach: auto-width, 100% height with box-sizing, and add some hack JS that only runs in IE6-7 to fix up the height there?

来源：https://stackoverflow.com/questions/2703631/cant-prevent-nested-divs-from-overflowing-when-using-percent-sizes-and-padding

标签

html

css

layout

liquid-layout