我希望能够使用这些属性来布局嵌套 div：
width: 100%height: 100%padding: 10px
我希望子元素的宽度和高度是 100%其余的 space after填充是计算出来的，而不是之前计算的。否则，当我有如下例所示的文档时，子项会使滚动条出现。但滚动条不是主要问题，子容器拉伸超出父容器的宽度才是主要问题。
我可以全部使用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:relative or position:static和百分比大小，根据父级的宽度/高度减去填充和边距，子级大小的百分比？我必须求助于position:absolute以及左/右/上/下？
谢谢您的帮助，
槊
我希望它是这样的，孩子们是计算填充之后剩余空间的 100% 宽度和高度，而不是之前。
实现这一目标的闪亮未来方法是：
#something {
width: 100%; height: 100%; padding: 10px;
box-sizing: border-box; -moz-box-sizing: border-boz; -webkit-box-sizing: border-box;
}
然而，这在 8 版之前的 IE 上不起作用。
我是否必须诉诸位置：绝对和左/右/上/下？
那是另一种方式，不过是‘边缘定位’（positioningtop and bottom但不是height，类似地对于left/right/width) 不适用于版本 7 之前的 IE。
滚动条不是主要问题，子容器拉伸超出父容器的宽度才是主要问题。
横向看不是问题。离开width默认情况下auto并且它将接收其父级的完整宽度减去填充。唯一的问题是你没有得到这种行为height.
混合方法：auto-width, 100%高度与box-sizing，并添加一些仅在 IE6-7 中运行的 hack JS 来修复那里的高度？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
