動態定位分區

Question

我正在一個網站上，我有兩個固定的div在上面。第一個只是一個小標題欄。第二個保存被編碼爲響應的圖像。

我需要添加第三個div，根據窗口大小動態地將自己置於第二個div下。我已經搜索了很多，最好的選擇是添加填充像素或間距設置像素的高度。這對我來說不起作用，因爲在移動設備上兩個div之間的空間很大。

任何幫助表示讚賞。

.one { 
width: 100%; 
position: fixed; 
top: 0; 
left: 0; 
float: left; 
background-image:url(assets/img/bg/bg2.jpg); 
z-index: 3;} 

.two { 
width: 100%; 
position: fixed; 
top: 75px; 
left: 0; 
float: left; 
z-index: 0; } 

.three { 
width: 100%; 
height:200px; 
position: relative; 
float: left; 
z-index: 2;} 

<div class="one"> 
<img src="assets/img/logo.png"> 
</div> 
<div class="two"> 
<img src="assets/img/bg/intro.jpg" class="img-responsive"> 
</div> 
<div class="three">This div needs to always find the bottom of the responsive div two</div> 

Answer 1

調查media queries。您需要編寫放置div的CSS規則，具體取決於視口的像素大小。您可以編寫一個規則，如果視口小於某個像素閾值，則會更改div的放置規則。

Answer 2

我會把第二個和第三個div放在另一個div中並給它一個display：block; 我認爲這就是你要找的。