0

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

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

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

我可以使用所有position: absolute声明，但这似乎不对。这是代码：

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

我该如何做到这一点，使用position:relativeorposition:static和百分比大小，百分比大小根据父母的宽度/高度减去填充和边距来确定孩子的大小？我必须诉诸position:absolute左/右/上/下吗？

谢谢你的帮助，兰斯

4

1 回答 1

1

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

闪亮的未来主义方法是：

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

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

我必须诉诸位置：绝对和左/右/上/下吗？

这是另一种方式，但“边缘定位”（定位top和bottom但不是height，类似地用于left// right）width在版本 7 之前的 IE 上不起作用。

滚动条不是主要问题，子容器超出父容器宽度的事实是。

横向的问题不大。保留width默认值auto，它将接收其父级的完整宽度减去填充。唯一的问题是你没有得到这种行为height。

一种混合方法：auto- width，100%heightbox-sizing和 添加一些仅在 IE6-7 中运行的 hack JS 以修复那里的高度？

于 2010-04-24T09:13:54.183 回答