css-位置:绝对;-自动高度

据我所知,绝对定位的子元素不可能以静态方式影响它们的高度,也不可能仅使用CSS来影响相对定位的父元素的高度。要么:

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

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

我最近有一个淡入/淡出的CSS转换幻灯片的问题,最后通过给第一个子元素解决了这个问题。 position: relative; 以及其他 position: absolute; top:0; left: 0; 确保容器高度与第一个元素的高度相同。由于我的CSS转换幻灯片使用不透明度属性,因此在幻灯片放映过程中容器尺寸不会发生变化。

唉,因为我还需要为旧浏览器提供一个javascript回退,所以无论如何,我都必须为这些浏览器设置容器高度(因为jquerys fadein/fadeout实际上设置了 display: none; 我猜)。

这是一个早就应该通过浏览器解决的问题。不再静止 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 上 页 ,以模拟常规块元素。

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

我认为你应该相对地调整它们的位置,只需在室内的沙发床中将“垂直对齐”改为“顶部”。那你就不会有麻烦了。

如果你想让它们在同一个水平面上,你可以简单地使它们浮动。

我已经完成了这个任务 JS . 只有,CSS:

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

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