幅が縮小するとChromeモバイルエミュレーションが動く要素はなぜですか？

私のブロック要素は自分自身の心で動いています。幅が縮小するとChromeモバイルエミュレーションが動く要素はなぜですか？

このコンテンツで新しいindex.htmlページを作成してください。ページ幅を縮小し、ページ幅が予想どおりに動作することを確認します。モバイルデバイスの「応答可能な」エミュレーションをオンにし、幅を縮小します。 <div>はなぜ動くのですか？

#outer要素が位置絶対

#inner要素が下あり、高さと幅が100％である：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

ありがとう、いや、それは彼らが原因で、ビューポートメタを欠くのWONTFIXと答え – neaumusic

バグのように思えます。ビューポートが 'device-width'に設定されていても、私はまだこの問題を経験しています。私は240px以下の幅を減らすと奇妙なことが起きます（vieportメタがない場合は、ビューポートが上に移動すると非常に素早く画面の下に移動します）。 ** Firefox devにはどちらの問題もありません。ツール** – krassowski

幅が縮小するとChromeモバイルエミュレーションが動く要素はなぜですか？

答えて

関連する問題