2016-04-15 22 views
0

position: fixed; right: 0;の要素は、他の要素がビューポートよりも広いがデスクトップではない場合、ビューポートから押し出されます。このように:位置を固定:固定;右:0;モバイルブラウザの画面上のエレメント

どのように私は、その要素がモバイルブラウザの画面上に残っていることを確認することができますか?

http://jsbin.com/zawijayata/edit?html,outputhttp://output.jsbin.com/zawijayata/で再生してください。

+0

あなたがテストに使用このツールは何ですか?このツールのバグかどうか確認しましたか? – Oriol

+0

それは私にクロムのように見える - 私のクロムでもそれを行う –

+0

それはモバイルデバイスで起こるかどうか確かめます、それですか? FFでも壊れない –

答えて

2

ビューポートよりも大きな要素を持っている理由がありますがない限り、に、以下のdivの上ごwidth:400pxを変更します。

width: 100%; 
max-width: 400px; 
+0

丁寧な回答ですが、なぜこれが起こるのか知っていますか?私は好奇心を知っている –

+0

ありがとう、しかし、残念なことに、ページ上の要素は、時には広い必要があります。 –

+0

これはほぼ私がやったことです。 –

0

vwユニットは、私がしたいように振る舞うように見えるので、作品のposition: fixed; left:calc(100vw - 75px);一種が、要素の幅(75px)をハードコーディングする必要があります。おそらく、正しい効果を得るためにvwを使用する別の方法があります。

0

代替ソリューションポジション:固定ワークスではなく絶対的なコードで、コードをページに貼り付けて、実際のモバイルデバイスでテストするためにローカル環境でホストしています(コードビンでは動作しませんでした、理由を知らない)。 もそう、モバイルブラウザがで600PXのdivに合わせてページを下に縮小しようとしないメタビューポートラインへの変更に注意してください。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width,initial-scale=1" /> 
</head> 
<body> 
    <div style="position:absolute; top:0; right:0;">Top Right</div> 
    <div style="width:600px; border:1px solid blue;">600px<? 
</body> 
</html>