为什么父div没有获得预期的高度
为什么父div没有获得预期的高度
提问于 2019-12-11 01:10:18
我已经实现了一个具有静态高度的模板。我更改了它的内容高度以适配子高度，但是parent <main>和parent <section>没有得到自动计算的高度。为什么？我对这个问题越来越抓狂了。
HTML：
<section class="seccion-productos">
<div id="sidebar">...</div>
<div id="grid-selector">...</div>
<div id="grid">...</div>
</section>
</main>
<footer>...</footer>
CSS：
#sidebar{
float: none;
height: auto;
width: 22%;
padding: 1% 0 0 2%;
}
.seccion-productos {
position: relative;
width: 100%;
}
#grid-selector {
width: 78%;
position: absolute;
top: 0;
left: 22%;
right: 0;
display: flex;
vertical-align: middle;
}
#grid {
width: 78%;
height: auto;
top: 90px;
left: 22%;
}意外结果，父内容不适合子内容
我只是在问什么事情可以让这一切发生，我应该做些什么来解决它。或者我是不是错过了什么。也不知道我该去哪里找。
你也可以在这里看到完整的代码：https://randal-es.000webhostapp.com/php/paginas/productos.php
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-13 01:24:59
正如@Johannes所说，如果你放置一个具有绝对位置的子元素，即使父元素有相对位置，它也不会影响父元素。父级的相对位置唯一影响的是绝对定位的坐标原点。您需要更改#grid-selector的位置定义，否则它将始终破坏您的布局。
Stack Overflow用户
发布于 2019-12-11 01:34:23
#grid-selector元素的position: absolute;将其从父级的大小计算上下文中取出。将其更改为relative
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59272324
复制相关文章
相似问题
腾讯云开发者
