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

我对某个部门有意见

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

---

我之所以用position:absolute设置这些div的样式，是因为它们都从容器div的顶部开始。

我认为应该相对地定位它们，只需将内部div中的“垂直对齐”更改为“顶部”。那么你就不会有弄乱abs div的问题了。

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

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

---

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

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

测试

显示：需要自动高度的元素上的内联块。
I最近有一个淡入/淡出CSS转换幻灯片出现了这个问题，最后通过给第一个子元素
位置：relative解决了这个问题和其他
位置：绝对；排名：0；左：0确保容器高度与第一个元素的高度相同。由于我的CSS转换幻灯片放映使用不透明度属性，因此在幻灯片放映过程中，容器尺寸永远不会改变

唉，因为我还需要为旧浏览器提供javascript回退，所以我不得不为这些浏览器设置容器高度（因为jQuerys fadeIn/fadeOut实际上设置了
display:none；
）
这是一个早就应该为您的问题提供的跨浏览器解决方案。不再有静态
宽度
，不再有
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>


/*clearfix*/
.货柜：之后{
内容：''；
显示：表格；
清除：左；
}
.第页{
浮动：左侧；/*并排显示*/
宽度：100%；/*与父级一样宽*/
右边距：-100%；/*不占宽度*/
}

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

下面是一个演示：

当然，这也适用于内联块。尽管您可能需要将容器的
字体大小
或
字母间距
设置为
0
。我还建议使用
.page
上的
垂直对齐：top
，来模拟常规块元素

这里有一个演示：
我在没有任何
JS的情况下完成了这个任务。仅通过CSS：

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

也许你可以试试
max height:calc（100%-50%）如果在屏幕/ div中间的内容是超短/小的，它将工作。< /P>
position:absolute;
top:0;
bottom:0;
margin:auto;
width:auto;
height:auto
max-height: calc(100% - 50%);
...etc...

尝试使用
显示：内联表格，高度：自动。。这对我来说很有用
对于任何选择使用JavaScript的人，请记住，在调整窗口大小时，您可能应该重新计算父窗口的高度。我个人鼓励使用纯CSS解决方案，以避免担心此类情况。虽然很明显，这会导致不同的问题，比如花7年时间试图找到一个只有18票的问题的答案+1再把这个穿起来，还是很有用的。当我在这里的时候，这里有一个动画演示：你错过了那里的财产。。。宽度或高度这真的救了我一天。我试着想出一个如何实现一个布局2天，最后偶然发现了这个答案。上帝保佑你！