在CSS中使用Percent Sizes和Padding时，无法防止嵌套Div溢出？ [英] Can't Prevent Nested Div's from Overflowing when using Percent Sizes and Padding in CSS?
问题描述
我希望能够使用这些属性布局嵌套的div：
I want to be able to layout nested divs with these properties:
-
width：100％ code> -
height：100％ -
padding：10px
width: 100%height: 100%padding: 10px
我想要的是，孩子们的宽度和高度都是100％计算填充之后的剩余空格，而不是之前。否则，当我有一个文档，如下面的例子，孩子让滚动条出现。但是滚动条不是主要问题，事实上孩子伸展超出父容器的宽度。
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.
我可以使用 position ：absolute 声明，但这似乎不对。下面是代码：
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>
如何使用 position：relative 或 position：static 和百分比大小，子项的大小根据父项的宽度/高度减去填充和边距？我必须诉诸 position：absolute 和left / right / top / bottom？
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?
感谢您的帮助，
Lance
Thanks for the help, Lance
推荐答案
我想要的是，孩子们是100
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;
}
但是在IE 8之前的版本中不能使用。
However this won't work on IE before version 8.
我必须求助于position：absolute和left / right / top / bottom吗？
Do I have to resort to position:absolute and left/right/top/bottom?
这是另一种方式，但是边缘定位（定位顶部和底部不是 height ，类似 left / right / width ）将无法在版本7之前的IE上使用。
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.
水平这不是问题。保留 width 默认 auto ，它会收到其父级的全宽减去paddings。唯一的问题是你没有得到 height 的行为。
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 - width ， 100％ -sizing ，并添加一些只在IE6-7中运行的hack JS来修复那里的高度？
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?
这篇关于在CSS中使用Percent Sizes和Padding时，无法防止嵌套Div溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
