爲什麼Chrome移動模擬在寬度縮小時正在移動元素？

我的街區元素正在隨着自己的想法而移動。爲什麼Chrome移動模擬在寬度縮小時正在移動元素？

創建一個新的index.html包含此內容的頁面。縮小頁面寬度並注意它的行爲如預期。打開移動設備「自適應」模擬，並縮小寬度。爲什麼<div>正在移動？

的#outer元件是高度和寬度爲100％，位置絕對

#inner元件具有底部：0，這應該總是錨定到視

有沒有任何方法來避免此問題的底部？

<!DOCTYPE html> 
<html> 
<head> 

<style> 

#outer { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
} 

#inner { 
    height: 200px; 
    width: 100%; 
    background: green; 
    position: absolute; 
    bottom: 0; 
} 

</style> 
</head> 
<body> 
    <div id='outer'> 
    <div id='inner'></div> 
    </div> 
</body> 
</html>

來源

2017-02-20 neaumusic

看起來像設備模式中的錯誤。我報告了一個issue。

重現：

點擊運行的代碼片段。
點擊整頁。
減少瀏覽器的寬度。底部的綠色條保持相同的高度。
以響應模式打開設備模式。
使用設備模式的手柄來減少視口的大小。綠色條的高度發生變化。

#outer { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 

 
#inner { 
 
    height: 200px; 
 
    width: 100%; 
 
    background: green; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div id='outer'> 
 
    <div id='inner'></div> 
 
</div>

來源

2017-02-22 19:24:20

謝謝啊這似乎是一個錯誤 – neaumusic

他們回答，因爲缺乏視元的wontfix。即使將視口設置爲「device-width」，我仍然遇到此問題。奇怪的事情發生時，我減少寬度低於240像素（如果沒有vieport元，它會迅速下到屏幕下方，如果視口設置在向上移動）。 **這兩個問題都不存在於Firefox開發中。工具**。 – krassowski

爲什麼Chrome移動模擬在寬度縮小時正在移動元素？

回答

相關問題