Question

我遇到了一些div的问题

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

我使用position设置这些div的原因：绝对是因为它们都从容器div的顶部开始。

Answer 1

据我所知，绝对定位的子元素无法仅使用CSS影响其静态或相对定位的父元素的高度。之一：

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

此问题在淡入/淡出JavaScript幻灯片中很常见，并且从我所看到的1）需要定义父容器的高度或2）为每个容器的动态设置父容器的高度滑动。

Answer 2

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

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

Answer 3

这是一个早该逾期的跨浏览器解决方案。不再是静态width，不再是em黑客。

<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。我还建议在vertical-align: top上使用.page来模拟常规块元素。

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

Answer 4

我认为你应该相对定位它们，只需在内部div中将“vertical-align”更改为“top”。那么你就不会有弄乱abs divs的问题。

Answer 5

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

Answer 6

我没有任何JS即可完成此任务。仅通过CSS：

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

Answer 7

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

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

Answer 8

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

Answer 9

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

CSS - 位置：绝对; - 自动高度

9 个答案: