位置为绝对的元素上的垂直空间

Question

如何使具有position:absolute和动态高度的元素仅使用CSS占据垂直空间？有没有我可以使用的容器和显示技巧？

Answer 1

不幸的是，根据定义，使用绝对定位意味着您的元素不再占用空间。因此，不行，只有通过CSS才能做到这一点。

您当然可以使用jQuery（或普通的javascript）来完成此操作。我该怎么做，每个垂直元素旁边都有一个space元素。将空间元素和绝对放置的垂直元素都围在相对放置的div中。在页面加载时，更改空格元素的height以匹配垂直元素的高度。

Answer 2

position: absolute表示它们不占用流中的空间。但是，您不必使用边距进行动画处理，可以使用float来让元素占用任何空间，并使每个元素成为position:relative。

div.animate-me {
   width: 300px;
   margin: 20px;
   float: left;
   left: -1000px; // Make them start offscreen
   position: relative;
   border: 1px solid red;
   visibility: hidden
}​

$('div').css().animate({
    left: 0
});

SAMPLE http://jsfiddle.net/qxzzX/1/

Answer 3

[并非在所有情况下都适用，但是：如果position: absolute元素具有固定的宽高比（例如，以height: auto进行响应的图像或视频大小调整），则可以利用padding-bottom trick来具有相同长宽比的spacer元素，以便与padding-bottom元素一起调整大小：

absolute

您可以阅读链接，但是可以使用，因为带有百分比的

.spacer {
  height: 0;
  padding-bottom: 125%; /* for a 1.25 height/width ratio */
}

被解释为元素宽度的百分比。

然后取决于您的特定布局来定位间隔物，使其精确地覆盖或覆盖padding-bottom元素，并占据position: absolute元素在没有absolute的情况下所占据的空间。