CSS采取绝对定位的孩子的高度

我有一个容器设置为max-width:780px和身高未申报。在容器内部，有一个图像幻灯片。页面上的所有内容都是响应式的，所以随着宽度的减小，图像（宽度设置为100％）调整高度容器。CSS采取绝对定位的孩子的高度

幻灯片变化的图像，以display:static;和position:absolute;因为它不被视为容器

的内容不再“保持开放”容器是否有任何创造性的解决方案在那里拿孩子元素的高度这是绝对定位？

下面的例子没有在主容器上声明高度..没有东西把它打开。 http://dhut.ch/test/santos/

谢谢！

2011-07-30 technopeasant

决定使用jQuery来处理它。见下面的问题。 http://stackoverflow.com/questions/6882019/using-jquery-to-adjust-a-parent-elements-height-to-match-its-visible-childs-he – technopeasant

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

来源

2011-07-30 07:43:19 ngen

我听到你，这是一个痛苦屁股。内联样式由jquery幻灯片生成，因此无法避免它。 – technopeasant

我认为你最好改变你的方法。对于滑块，最佳做法是使容器的子元素浮动，并使用其中一种已知技术来防止父级的崩溃。所以，我建议你从图片中删除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容器的末尾。

来源

2011-07-30 07:54:34

Naemati - 我很乐意将它们浮起来......但为了让它们渐渐变成另一个，它们需要完全置于彼此之上。 – technopeasant

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

所以，如果你的图片都是，比如说760px宽x 500像素高，这是760分之500= 0.65789

这是个会转化为类似：

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

的原因，这作品是因为使用padding（如果它设置了百分比），则将其计算为宽度为的百分比。随着元素宽度缩小，高度将按比例缩小，并且框将保持相同的宽度与高度的比例。绝对定位的图像不会被添加到盒子的高度。

只要您的图像具有相同的宽高比，并且您不希望该比例发生变化，就会生效。如果你会使用大量的随机图片，这不适合你。

来源

2011-08-10 19:29:38 unexplainedBacn

太棒了，真是个好主意！感谢你！ – DanC

我最近有一个类似的问题，我需要一个图像，以绝对位置在Zurb基金会模板页面的顶部，以便将其拉出流程并重置其尺寸（图像必须伸展到包装的边缘，而是由其父代.row填充）。但是，当然，这意味着它下面的所有流体响应元件都会直接从图像顶部弹出。设置边缘顶部或将兄弟元素放置在下方意味着不会随浏览器宽度调整大小的刚性顶部空间。

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

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

来源

2013-06-20 17:55:09

对于在绝对定位的图像之后放置复制图像的位+1。一直在寻找这个容器高度的工作，绝对定位元素quandry了一段时间，这工作的一种享受！谢谢 –

正是我寻找的解决方案！ –

@GraySpectrum真的吗？我认为unexplainedBacn的解决方案比我的解决方案更好 - 确保尝试填充解决方案，因为它不会将HTML写入页面，而且非常优雅。并按比例调整大小。 –

CSS采取绝对定位的孩子的高度

回答

相关问题