css - 另一个绝对可变高度div下的div

Question

我有一个高度可变的 div(只有一个图像具有最大宽度:100% 和自动高度以在调整大小时缩放它)。

所以我想要一个带有文本的 div 与这个图像 div 重叠......好的。但是我想在这个带有图像的包装下有其他 div ..

这就是问题所在.. 我不知道 div 的高度(因为它取决于调整大小时的图像高度)，然后，当我尝试继续其他应该在此包装下的 div 时，get贴在它下面因为它的位置是绝对的!

<div id="wrap">

    <div id="background">

        <img src="http://i.imgur.com/hXtf2Dq.jpg" class="myImage" />            

    </div><!-- #wf_sliderItemBackground -->

    <div id="mySubtitle">

        dfdf

    </div><!-- #background -->

</div><!-- #wrap -->

<div>
I CANT MAKE THIS DIV APPEAR UNDER THE IMAGE... I CANT USE DIMENSIONS SINCE I'M TRYING TO CREATE A RESPONSIVE LAYOUT AND USING HEIGHT IN PIXELS WOULD RUIN IT...
</div>

这是 CSS:

* { margin:0; padding:0; }

#wrap {

    width:100%;
    display:table;
    text-align:center;

}

#background {
    width:100%;
    max-width:100%;
    position:absolute;
}

.myImage {
    width: 100%;
    max-width: 100%;
}

    #mySubtitle {
    margin:0 auto;
    width:100%;
    max-width:1200px;
    background:green;
    position:relative;
    }

检查 fiddle :

http://jsfiddle.net/cjd6n0mm/

Answer 1

由于您的 text div 在 wrap div 之外，wrap 应该是 relative 和 高度 定义

#wrap {
    width:100%;
    position:relative;
    display:table;
    text-align:center;
    height:50%
}

并在特定的 div 中覆盖您的文本 div

div.a {
    color:blue;
    position:relative;
    bottom:0;
}

此外，不要硬重置 *，而是使用 html,body 重置，这是经验法则

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

Fiddle demo