我的问题是，如果你不能事先知道父div的大小，有没有办法，不使用JavaScript，导致子div延伸到其父级的边界，而不超过这些边界？
下面是演示我的问题的示例标记/样式。如果将其加载到浏览器中，您将看到#two和#three都延伸到其父级#one之外，并导致滚动条出现。
我的问题不在于滚动条，而是我不知道如何告诉子div占用剩余的宽度或高度，而不是父级的全高或宽度。
<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body>
</html>
我有一个类似的问题，但在我的情况下，我在我的div中有内容，高度方面将超过父div的边界。当它，我希望它自动滚动。我能够通过使用来实现这一目标
.vscrolling_container { height: 100%; overflow: auto; }
如果您希望子div符合父级大小，则应在子div（child.margin >= child.bordersize）上设置至少为子边框大小的边距。
对于此示例，只需删除宽度：100％;和#one中的高度：100％并删除宽度：#two中的100％。它应该是这样的：
html, body {width:100%; height:100%; margin:0; padding:0;}
.border {border:1px solid black;}
.margin {margin:5px;}
\#one {}
\#two {height:50px;}
\#three {width:100px; height:100%;}
我想我有你的问题的解决方案，假设你可以在你的项目中使用flexbox。你想要做的是使用#one使display: flex成为flexbox，并使用flex-direction: column使其成为列对齐。
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.border {
border: 1px solid black;
}
.margin {
margin: 5px;
}
#one {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#two {
height: 50px;
}
#three {
width: 100px;
height: 100%;
}<html>
<head>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body>
</html>你可以使用display: inline-block;
希望它有用。
在你的例子中，你不能：5px margin被添加到div#two和div#three的边界框中，有效地使它们的宽度和高度100％的父级+ 5px，这将溢出。
您可以在父元素上使用padding以确保其边框内有5px空间：
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
#one {padding:5px;width:500px;height:300px;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
编辑：在测试中，从width:100%中删除div#two实际上会让它正常工作，因为divs是块级别，并且默认情况下总是填充父母的宽度。如果你想使用保证金，这应该清除你的第一个案例。
通常使用两种技术：
鉴于您在此提供的HTML是使用绝对定位的解决方案：
body #one {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto;
}
body #two {
width: auto;
}
body #three {
position: absolute;
top: 60px;
bottom: 0;
height: auto;
}<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body尽管有共同的批评，你总是可以直接使用table，tr和td元素，因为它可以完成工作。如果你更喜欢使用CSS，那么没有colspan的等价物，所以你最终可能会遇到嵌套表。这是一个例子：
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#one {
box-sizing: border-box;
display: table;
height: 100%;
overflow: hidden;
width: 100%;
border: 1px solid black;
}
#two {
box-sizing: border-box;
display: table;
height: 50px;
padding: 5px;
width: 100%;
}
#three {
box-sizing: border-box;
display: table;
height: 100%;
padding-bottom: 60px;
padding-left: 5px;
}
#four {
display: table-cell;
border: 1px solid black;
}
#five {
display: table-cell;
width: 100px;
border: 1px solid black;
}
#six {
display: table-cell;
}<html>
<div id="one">
<div id="two">
<div id="four"></div>
</div>
<div id="three">
<div id="five"></div>
<div id="six"></div>
</div>
</div>
</html>宽度很容易，只需删除width: 100%规则。默认情况下，div将拉伸以适合父容器。
身高不是那么简单。你可以做像equal height column trick这样的事情。
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:500px;height:300px; overflow: hidden;}
#two {height:50px;}
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}
关闭，我认为这个问题的答案是没有解决方案。获得我想要的行为的唯一方法是使用javascript。
确保最外层的div具有以下CSS属性：
.outer {
/* ... */
height: auto;
overflow: hidden;
/* ... */
}
你可以使用继承
#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}
如果我理解正确，最简单的方法就是让孩子们漂浮。例如：
#one { width: 500px; height: 1%; overflow: hidden; background: red; }
#two { float: left; width: 250px; height: 400px; background: aqua; }
#two { float: left; width: 250px; height: 200px; background: lime; }
在父元素上设置维度（高度/宽度）和溢出为自动或隐藏会导致它包含任何浮动的子元素。
注意溢出：隐藏;有时会导致内容被切断的问题，在这种情况下，您可能想尝试这种替代方法：