Html 具有位置的元素上的垂直空间：绝对
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11837401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical space on elements with position:absolute
提问by Yisela
How can I make elements with position:absoluteand dynamic heightoccupy vertical space using only css? Is there any trick with containers and display that I can use?
怎样才能让用元素position:absolute和动态高度仅使用CSS占据的垂直空间？我可以使用容器和显示器有什么技巧吗？
采纳答案by Jeff Gortmaker
Unfortunately, using absolute positioning means, by definition, that your element is no longer taking up space. So no, only through css there is no way to do this.
不幸的是，根据定义，使用绝对定位意味着您的元素不再占用空间。所以不，只有通过 css 没有办法做到这一点。
You can of course use jQuery (or plain javascript) to accomplish this. How I'd do it is have a spaceelement next to each vertical element. Enclose both the space element and the absolutely positioned vertical element in a relatively positioned div. On page load, change the heightof the space element to match the height of the vertical element.
您当然可以使用 jQuery（或普通 javascript）来完成此操作。我的做法是space在每个垂直元素旁边都有一个元素。将空间元素和绝对定位的垂直元素都包含在一个相对定位的 div 中。在页面加载，改变高度的空间元素相匹配的垂直元素的高度。
回答by Juan Mendes
position: absolutemeans they don't occupy space in the flow. However, you don't have to animate using margin, you can use floatto let the elements take up whatever space, and make each of the elements position:relative.
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
});
回答by user1454265
This doesn't apply to all situations, but: if the position: absoluteelement has a fixed aspect ratio (e.g. an image or video resizing responsively with height: auto), you can take advantage of the padding-bottomtrickto give a spacer element that same aspect ratio, so that it resizes in tandem with the absoluteelement:
这并不适用于所有情况，但是：如果position: absolute元素具有固定的纵横比（例如图像或视频响应地调整大小height: auto），您可以利用该padding-bottom技巧为间隔元素提供相同的纵横比，以便它与absolute元素一起调整大小：
.spacer {
height: 0;
padding-bottom: 125%; /* for a 1.25 height/width ratio */
}
You can read the link, but this works because padding-bottomwith a percentage is interpreted as a percentage of the element's width.
您可以阅读链接，但这是有效的，因为padding-bottom百分比被解释为元素宽度的百分比。
It's then up to your particular layout to position the spacer such that it precisely covers or underlays the position: absoluteelement, and takes up the space that your absoluteelement would have were it not absolute.
然后由您的特定布局来定位垫片，使其精确地覆盖或覆盖position: absolute元素，并占用您的absolute元素本来应该拥有的空间absolute。
