Question

我有一个容器，设置为max-width:780px，高度未声明。在容器内部，有一个图像幻灯片。页面上的所有内容都是响应式的，因此当宽度减小时，图像（宽度设置为100％）会调整高度容器。

幻灯片更改的图像为display:static;和position:absolute;，不再“保持打开”容器，因为它不被视为容器的内容

是否有任何创造性的解决方案来获取绝对定位的子元素的高度？

下面的示例在主容器上声明了没有高度..没有任何东西保持打开状态。 http://dhut.ch/test/santos/

谢谢！

Answer 1

图像尺寸是否相同？如果是，您可以对包含图像的元素使用百分比padding-top。

因此，如果您的图像全部为760像素宽，500像素高，则为500/760 = .65789

百分比将转化为：

#main { 
    position: relative; 
    max-width: 760px;
    padding-top: 65.789%;  
}

这样做的原因是因为padding如果设置了百分比，则计算为宽度的百分比。随着元件宽度的缩小，高度将按比例收缩，盒子将保持相同的宽高比。绝对定位的图像不会增加框的高度。

只要您的图像具有相同的宽高比并且您不希望该比率发生变化，这个就可以正常工作。如果您将使用大量随机图像，则不适合您。

Answer 2

我最近遇到了类似的问题，我需要在Zurb Foundation模板页面的顶部绝对位置，以便将其拉出流程并重置其尺寸（图像必须拉伸到包装的边缘，而是由其父.row padding包围）。然而，当然，这意味着它下面的所有流体响应元件都会突然出现在图像的顶部。设置margin-top或将兄弟元素定位在下方意味着一个刚性的顶部空间没有根据浏览器的宽度调整大小。

为了解决这个问题，我在绝对定位的图像后放置了一个副本，并设置了visibility: hidden;我必须添加一点额外的边距以弥补高度的差异，但是最终结果是页面上的所有内容都精确地流向正在使用的图像的高度。

我还使用了上面的unexplainedBacn描述的填充技巧，这也是一个很棒的技巧。这需要一点点数学，但我投了那个答案。很好的解决方案。

Answer 3

我认为你最好改变你的做法。对于滑块，最佳实践是浮动容器的子元素，并使用已知技术之一来防止父级的崩溃。因此，我建议您从图片中删除position: absolute CSS规则并将其浮动到<div id='main'>中，然后使用这些方法中的任何一种来强制它包含它的子项：

div#main {overflow: hidden;}
div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
将<div style='clear: both;'>添加到主div容器的末尾。

Answer 4

删除绝对位置。我也会避免使用内联样式。

CSS占据绝对定位的孩子的高度

4 个答案: