div下另一個絕對可變高度div

我有一個可變高度的div（只有一個圖像與最大寬度：100％和自動高度來調整其調整大小）。div下另一個絕對可變高度div

所以我想有一個文本覆蓋這個圖像分區的div ...好的。但後來我想有這個包裝下的其他股利圖像..

這裏的問題..我不知道div的高度（因爲它取決於調整大小的圖像高度），然後，當我嘗試繼續應該在這個包裝下的其他div時，下面的get stucker導致它的位置是絕對的！

<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; 
    }

檢查fidddle：

http://jsfiddle.net/cjd6n0mm/

來源

2014-12-05 user3787036

由於您text div是wrap股利外，wrap應relative與定義的height

#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

的規則

來源

2014-12-05 04:50:51 NoobEditor

但是這個解決方案的問題是：當我嘗試調整大小時，較高的分辨率會覆蓋文本，較低的分辨率會在圖像和文本div之間顯示一個大的空白區域！ :( – user3787036 2014-12-05 05:03:08

你可以使用媒體查詢這個目標視口的寬度？ – NoobEditor 2014-12-05 05:48:19

div下另一個絕對可變高度div

回答

相關問題