在CSS中使用百分比大小和填充时，无法阻止嵌套Div溢出？

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

我希望能够使用这些属性布局嵌套的div：

width: 100%
宽度：100％
height: 100%
身高：100％
padding: 10px
填充：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.

我希望它是这样的，孩子们在填充之后的剩余空间的100％宽度和高度被计算，而不是之前。否则，当我有一个类似下面例子的文档时，孩子会出现滚动条。但滚动条不是主要问题，因为子项超出父容器的宽度这一事实。

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?

如何使用position：relative或position：static和percent size，根据父级的宽度/高度减去填充和边距，子项的百分比大小？我是否必须求助于位置：绝对和左/右/上/下？

Thanks for the help, Lance

谢谢你的帮助，兰斯

1 个解决方案

#1

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

我希望它是这样的，孩子们在填充之后的剩余空间的100％宽度和高度被计算，而不是之前。

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.

但是，这在版本8之前的IE上不起作用。

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.

这是另一种方式，但“边缘定位”（定位顶部和底部但不是高度，类似于左/右/宽度）将不适用于版本7之前的IE。

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.

水平不是问题。将宽度保留为默认值auto，它将获得其父级的全宽减去填充。唯一的问题是你没有得到高度的行为。

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?

一种混合方法：自动宽度，100％高度和盒子大小，并添加一些只在IE6-7中运行以修复高度的黑客JS？

#1