CSS - position: absolute; - 自动高度

Question

我遇到了一些

的问题

外部的

设置了最小高度，但是内部的

高度各不相同。由于内部的

采用绝对定位，它们不会影响外部的高度。有没有办法让这些内部的

影响外部的高度呢？

我使用绝对定位样式来设置这些

，以便它们都从容器

的顶部开始。

- superUntitled

Answer 1

据我所知，仅通过CSS，绝对定位的子元素无法影响其静态或相对定位的父元素的高度。可以采取以下两种方法之一：

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

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

- Andrew

---

对于选择使用JavaScript的人，请记住在窗口调整大小时应该重新计算父元素的高度。个人而言，我会鼓励采用纯CSS解决方案，以避免担心这种情况。尽管显然这会导致不同的问题，比如花费超过七年时间寻找仅有18个赞的问题的答案... +1 - Samuel Willems

Answer 2

我最近在使用一个淡入淡出的CSS过渡幻灯片中遇到了一个问题，最终通过给第一个子元素设置position: relative;以及其他子元素设置position: absolute; top:0; left: 0;来解决，这样可以确保容器的高度与第一个元素的高度相同。由于我的CSS过渡幻灯片使用了不透明度属性，在整个幻灯片的过程中容器尺寸不会改变。

不幸的是，由于我还需要为旧浏览器提供JavaScript备选方案，所以我必须为这些浏览器设置容器高度（因为jQuery的fadeIn/fadeOut实际上会设置display: none;，我猜测是因为这个原因）。

- Simon

---

这真的救了我的一天。我试图想出如何实现一种布局已经两天了，最终偶然发现了这个答案。上帝保佑你！ - Chipsy

Answer 3

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

- rainat

Answer 4

这是一个早就应该有的跨浏览器解决方案，不再需要静态的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/

- Samuel Willems

---

我又挖出来了，仍然很有用。顺便说一下，这里有一个动画演示：https://jsfiddle.net/b92kmcus/ - Samuel Willems

Answer 5

我认为您应该相对定位它们，只需将内部div的“vertical-align”更改为“top”。然后您就不必担心与绝对定位的div混淆的问题。

- dscher

Answer 6

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

- kmiyashiro

Answer 7

我已经完成了这个任务，没有使用任何JS。只用了CSS：

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

- Kas Elvirov

---

你那里缺少属性...宽度或高度。 - Diego Dorado

Answer 8

也许你可以尝试使用 max-height: calc(100% - 50%); 如果居中显示的内容非常短小，这将起作用。

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

- Майкл Миллер

Answer 9

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

- Sawny