html - 为什么父 div 没有达到预期的高度

Question

我已经实现了一个具有静态高度的模板。我已经改变了它的内容高度以适应 child 的高度，但是 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

Answer 1

@Arngue，正如@Johannes 所说，如果将子元素放置在绝对定位中，即使父元素具有相对位置，它也不会影响父元素。 parent 的相对位置唯一影响的是绝对定位的坐标原点。您需要更改 #grid-selector 的位置定义，否则它总是会破坏您的布局。