如何使子 div 始终适合父 div？

小开

你可以继承遗产

#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}

小开

在您的示例中，您不能: 5px margin被添加到 div#two和 div#three的边界框中，有效地使它们的宽度和高度达到父级 + 5px 的100% ，这将导致溢出。

您可以在父元素上使用 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>

编辑: 在测试中，从 div#two中移除 width:100%实际上会让它正常工作，因为 div是块级别的，默认情况下总是填充它们父母的宽度。如果你想用保证金的话，这应该能解决你的第一个案子。

小开

如果我没理解错的话，最简单的方法就是让孩子们浮起来，例如:

#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; }

设置一个维度(高度/宽度)并将溢出设置为自动或隐藏在父元素上，会导致它包含任何浮动的子元素。

请注意，溢出: 隐藏; 偶尔会导致内容被切断的问题，在这种情况下，您可能需要尝试这种替代方法:

Http://www.positioniseverything.net/easyclearing.html

小开

宽度很容易，只要删除 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;}

小开

对于结束语，我认为这个问题的答案是没有解决办法。获得我想要的行为的唯一方法是使用 javascript。

小开

如果希望子 div 适合父级大小，则应在子 div (child.margin >= child.bordersize)上至少放置子边框大小的边距。

对于这个示例，只需删除一中的 宽度: 100% ;和 身高: 100% ，并删除 宽度: 100% 在 # 2。应该是这样的:

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%;}

小开

我也遇到过类似的问题，但是在我的例子中，我的 div 中的内容显示高度将超过父 div 的边界。到时候，我要它自动滚动。我能做到这一点，通过使用

.vscrolling_container { height: 100%; overflow: auto; }

小开

你可以用 display: inline-block;

希望有用。

小开

这里有两种常用的方法:

绝对定位
表格样式

给定你在这里提供的 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>

小开

确保最外面的 div 具有以下 CSS 属性:

.outer {
/* ... */
height: auto;
overflow: hidden;
/* ... */
}

小开

我想我有办法解决你的问题，假设你可以在你的项目中使用弹性箱。你要做的是使 #one一个柔性箱使用 display: flex和使用 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>