CSS - 位置：绝对； - 自动高度答案

【问题标题】：CSS - position: absolute; - auto heightCSS - 位置：绝对； - 自动高度
【发布时间】：2021-02-08 09:01:09
【问题描述】：

我遇到了一些 div 的问题

外部 div 有一个最小高度，但内部 div 都是不同的高度。因为内部 div 是绝对定位的，所以它们不会影响外部 div 的高度。有没有办法让这些内部 div 影响外部 div 的高度？

我将这些 div 设置为 position:absolute 的原因是它们都从容器 div 的顶部开始。

【问题讨论】：

标签： css

【解决方案1】：

据我所知，绝对定位的子元素无法静态影响它们的高度，或者仅使用 CSS 相对定位的父元素。要么：

重新组织以使子元素保留在文档流中
在页面加载时使用 JavaScript 将父级的高度设置为最大子级的高度

这个问题在淡入/淡出 JavaScript 幻灯片中很常见，据我所见，1) 需要定义父容器的高度或 2) 为每个动态设置父容器的高度幻灯片。

【讨论】：

对于选择使用 JavaScript 的任何人，请记住，当调整窗口大小时，您可能应该重新计算父级的高度。就个人而言，我会鼓励使用纯 CSS 解决方案，以避免担心这种情况。虽然很明显这会导致不同的问题，比如花了七年多的时间试图找到一个只有 18 票赞成的问题的答案......+1

【解决方案2】：

我最近遇到了淡入/淡出 CSS 过渡幻灯片的问题，最终通过给第一个子元素 position: relative; 和其他 position: absolute; top:0; left: 0; 来解决它，这确保容器高度与高度相同的第一个元素。由于我的 CSS 过渡幻灯片使用 opacity 属性，因此容器尺寸在幻灯片播放过程中永远不会改变。

唉，因为我还需要为旧浏览器提供 javascript 后备，所以无论如何我都必须为这些浏览器设置容器高度（因为 jQuerys fadeIn/fadeOut 实际上设置了 display: none; 我猜）。

【讨论】：

这真的拯救了我的一天。我试图弄清楚如何实现一个布局 2 天，最后偶然发现了这个答案。上帝保佑你！

【解决方案3】：

这是一个早该解决您问题的跨浏览器解决方案。不再有静态width，不再有em hack。

<style>
  /* clearfix */
  .container:after {
    content: '';
    display: table;
    clear: left;
  }

  .page {
    float: left; /* display side-by-side */
    width: 100%; /* be as wide as parent */
    margin-right: -100%; /* take up no width */
  }
</style>

<div class="container">
  <div class="page"></div>
  <div class="page"></div>
</div>

在寻找这个问题的解决方案这么久之后，我很困惑地看到它是多么简单。当然，.page 元素不是绝对定位的。但是，通过这种方法可以实现所有相同的目标，几乎没有痛苦或牺牲。

这是一个演示：https://jsfiddle.net/eqe2muhv/

当然，这也适用于内联块。尽管您可能需要将容器的font-size 或letter-spacing 设置为0。我还建议在.page 上使用vertical-align: top 来模拟常规块元素。

这是一个演示：https://jsfiddle.net/dzouxurs/8/

【讨论】：

再次挖掘它，仍然证明有用。当我在做的时候，这里有一个动画演示：jsfiddle.net/b92kmcus

【解决方案4】：

尝试使用display: inline-table, height: auto; .. 它对我有用

【讨论】：

【解决方案5】：

我认为您应该将它们相对定位，只需将内部 div 中的“vertical-align”更改为“top”即可。这样你就不会遇到弄乱 abs div 的问题了。

【讨论】：

【解决方案6】：

如果您希望 div 位于同一水平面上，您可以简单地浮动它们。

【讨论】：

【解决方案7】：

我在没有任何JS 的情况下完成了这项任务。仅通过 CSS：

.frame {
   max-height: calc(100vh - 283px); // 283px gives me some space at the botoom of the frame
}

【讨论】：

你缺少那里的属性...宽度或高度

【解决方案8】：

也许你可以试试max-height: calc(100% - 50%);，如果应该在屏幕/div中间的内容超短/小，它会起作用。

position:absolute;
top:0;
bottom:0;
margin:auto;
width:auto;
height:auto
max-height: calc(100% - 50%);
...etc...

【讨论】：

【解决方案9】：

在需要自动高度的元素上测试display: inline-block。

【讨论】：