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

Question

我有一个容器设置为a 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如果用百分比设置它,它将被计算为宽度的百分比.随着元件宽度的缩小,高度将按比例收缩,盒子将保持相同的宽高比.绝对定位的图像不会增加到框的高度.

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