Question

我有以下HTML + CSS标记：

<div id="protofade" style="position: relative;">
    <div style="position: absolute;"><img src="slide-01.jpg"></div>
    <div style="position: absolute;"><img src="slide-02.jpg"></div>
    <div style="position: absolute;"><img src="slide-03.jpg"></div>
</div>

请注意，幻灯片绝对位于相对定位元素内，以便所有幻灯片的左上角对齐。所有幻灯片都是相同的高度，但高度没有预先确定，因此这个问题：“protofade”div没有高度。是否有任何CSS技巧可以使这个div与第一张幻灯片一样高，而没有明确指定height: NNpx。

Answer 1

有一个jQuery答案。我不相信这可以通过CSS完成，因为你需要能够获得第一个div的高度。

我在这里说明了一点：http://jsfiddle.net/thewebdes/FHgz5/

作为参考，这里是代码的缺失：

HTML

<!--
using DIVs in place of IMGs
setting height to these DIVs, all equal as specified
-->
<div id="protofade" style="position: relative;">
    <div style="position: absolute;"><div style="width: 200px; height: 50px; background: #F66;"></div></div>
    <div style="position: absolute;"><div style="width: 200px; height: 50px; background: #6F6;"></div></div>
    <div style="position: absolute;"><div style="width: 200px; height: 50px; background: #66F;"></div></div>
</div>

CSS

/* border set to show height given to DIV */
#protofade { border: 5px solid #000; }

JS

// CSS height set based on the height of the first DIV
// First DIV chosen as all heights will be the same anyway so it shouldn't matter.
$('#protofade').css("height", $('#protofade div:eq(1)').height());

Answer 2

<div id="protofade" style="position: relative;">
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #F66;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #6F6;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #66F;"></div></div>
<div style="visibility:hidden;"><div style="width: 200px; height: 50px; background: red;"> This should be a second copy of slide one </div></div>
</div>

上面的代码显示了您的原始代码（除了div，根据上面的Scott Brown），添加了第二个“幻灯片1”副本，使用默认算法定位，但隐藏了其框。因此，它的容器，protofade，必须足够大，以容纳盒子，即使没有显示框。

设置子节点位置为div的div的高度：绝对值

2 个答案: