html布局 子元素的高度不会影响父元素的高度

更新时间:2024-09-02 10:21
<div style="data-height: 100px;position: relative;background-color: #f0ad4e">
    <div style="data-height: 100%;background-color: orange"></div>
    <div style="data-height: 100%;background-color: red"></div>
</div>
父元素高度: 父元素的高度设置为 100px。
子元素高度: 子元素的 data-height: 100% 是相对于其父元素的高度的,因此每个子元素的高度都是 100px。
为什么没有撑开或裁剪
固定高度: 父元素的高度是固定的 100px。子元素的 data-height: 100% 只是意味着它们的高度与父元素的高度相同。子元素不会改变父元素的高度。
布局行为: 在标准流布局中,子元素的高度不会影响父元素的高度,除非父元素的高度是由内容撑开的。例如,如果父元素的高度没有被明确设置为固定值(比如 data-height: auto),子元素的内容会影响父元素的高度。但在你的情况下,父元素高度被明确设置为 100px,子元素的高度设置为 100% 只是填满了父元素的高度,并不会改变父元素的实际高度。
子元素溢出: 子元素的 data-height: 100% 使它们的高度等于父元素的高度,而这两个子元素的高度总和超过了父元素的高度,这会导致子元素超出父元素的边界,形成滚动条或重叠的现象。父元素的高度仍然是 100px,不论子元素的内容如何。
解决方法
如果你希望父元素的高度能够根据子元素自动调整,可以去掉 height 属性或使用 min-height 来确保父元素至少有足够的高度容纳子元素。