當視口變小時，內部div的高度不能調整

Question

我有一個div，它的背景是電話的背景。我試圖讓內部分區在視口變小時調整大小。

你可以看到一個演示here

HTML

<div class="phone-container"> 
    <div class="screen"> 
    </div> 
</div> 

CSS

.phone-container { 
    position: relative; 
    background: url(http://imgur.com/eyIzwSW.jpg) no-repeat; 
    background-size: contain; 
    width: 25.188em; 
    height: 50em; 
    max-width: 90%; 
} 

.screen { 
    position: absolute; 
    left: 8.1%; 
    top: 15.1%; 
    width: 82.5%; 
    height: 65.1%; 
    background-color: green; 
    overflow: hidden; 
} 

當視口被一個正常大小，它的作品了罰款，如果一個人逐漸降低視口大小，內部div的寬度調整正確，但高度保持不變。如何在不使用JavaScript的情況下讓內部div的高度能夠正確響應？

Answer 1

百分比top基於元素父級的height。在你的情況，當你調整窗口大小的父的height不會改變，所以孩子的top將不會改變。請參閱documentation for top。

我有成功使用不同的結構，讓圖像定義.phone-container高度：

<div class="phone-container"> 
    <img src="http://imgur.com/eyIzwSW.jpg" /> 
    <div class="screen"></div> 
</div> 

.phone-container { 
    position: relative; 
    width: 90%; 
    max-width:552px; 
} 

.phone-container img { 
    position:relative; 
    width:100%; 
} 

.screen { 
    position: absolute; 
    left: 8.1%; 
    top: 15.1%; 
    width: 82.5%; 
    height: 65.1%; 
    background-color: green; 
} 

相對於圖像畫面的位置沒有像素完美的，但你可以可能會調整值以使其更準確。

Working Example (jsFiddle)

Answer 2

您指定的內div的高度爲百分比，這意味着它設置爲高度窗口的百分比。如果您通過更改瀏覽器窗口寬度來「調整視口大小」，則不會更改高度。

Answer 3

如果你仍然想使用<div>代替<img>的，有保持<div>的縱橫比一招：

LIVE DEMO

HTML：

<div class="phone-container"> 
    <div class="aspect-ratio-container"> 
     <div class="dummy"></div> 
     <div class="screen"></div> 
    </div> 
</div> 

CSS：

.phone-container { 
    position: relative; 
    background: url(http://imgur.com/eyIzwSW.jpg) no-repeat; 
    background-size: contain; 
    width: 25.188em; 
    height: 50em; 
    max-width: 90%; 
} 
.aspect-ratio-container { 
    display: inline-block; 
    position: relative; 
    width: 90.5%; 
} 
.dummy { 
    padding-top: 176%; 
} 

.screen { 
    position: absolute; 
    top: 18.5%; 
    bottom: 0; 
    left: 9%; 
    right: 0; 
    background-color: green; 
}