如何让子div总是适合在父div？
我的问题是，如果有一种方法，不使用JavaScript，导致子div扩展到父母的边界，而不会超过这些边界，当你不能事先知道父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>
我也有类似的问题，但在我的情况下，我有我的div内容，高度明智将超过父分区的界限。 当它，我想它自动滚动。 我能够通过使用来实现这一点
.vscrolling_container { height: 100%; overflow: auto; }
你可以使用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>
编辑：在testing中，从div#two删除width:100%将实际上让它工作正常，因为div是块级别，并将默认填充父母的宽度。 如果你想使用保证金，这应该清除你的第一个案件。
对于宽度很容易，只需删除width: 100%规则。 默认情况下， div将拉伸以适应父容器。
身高不是那么简单。 你可以做一些像高度相同的技巧 。
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;}
有两种常用的技术：
- 绝对定位
- 表格样式
鉴于您在这里提供的HTML是使用绝对定位的解决scheme：
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
确保最外面的div具有以下CSS属性：
.outer { /* ... */ height: auto; overflow: hidden; /* ... */ }
closures，我想这个问题的答案是没有解决办法。 获得我想要的行为的唯一方法就是使用javascript。
你可以使用inheritance
#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; }
将维度（高度/宽度）和溢出设置为自动或隐藏在父元素上会导致它包含任何浮动的子元素。
请注意，溢出：隐藏; 偶尔会导致内容切断问题，在这种情况下，您可能需要尝试以下替代方法：
如果您希望子div符合父级大小，则应该至less在子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%;}
最后一次尝试会很好。 但是，如果你尝试插入文字y会看到文字将超过边界
