タグ付けされた質問 「viewport-units」

私は非常に奇妙な問題を抱えています...すべてのブラウザーとモバイルバージョンでこの動作が発生しました： ページをロードすると、すべてのブラウザにトップメニューが表示され（たとえば、アドレスバーが表示されます）、ページのスクロールを開始すると上にスライドします。 100vh はビューポートの表示部分でのみ計算される場合があるため、ブラウザバーを上にスライドすると、100vhが増加します（ピクセル単位）。 寸法が変更されたため、すべてのレイアウトが再ペイントおよび再調整されます ユーザーエクスペリエンスに悪影響を与える この問題を回避するにはどうすればよいですか？ビューポートの高さを初めて聞いたときは興奮し、JavaScriptを使用する代わりに固定高さのブロックにそれを使用できると思っていましたが、今、それを行う唯一の方法は、実際にはサイズ変更イベントを伴うJavaScriptだと思います... あなたは問題を見ることができます：サンプルサイト 誰かがCSSソリューションで私を助ける/提案できますか？ 簡単なテストコード： コードスニペットを表示 /* maybe i can track the issue whe it occours... */ $(function(){ var resized = -1; $(window).resize(function(){ $('#currenth').val( $('.vhbox').eq(1).height() ); if (++resized) $('#currenth').css('background:#00c'); }) .resize(); }) *{ margin:0; padding:0; } /* this is the box which should keep constant …

285 html  css  viewport-units 

私は新しく、一般的でないCSSユニットについて学びました。vhそしてvw、それぞれのビューポートの高さと幅の比率を測定します。 私はスタックオーバーフローからこの質問を見ましたが、ユニットがさらに似ているように見えました。 vwおよびvhユニットの仕組み 答えは具体的に言う vwとvhはそれぞれウィンドウの幅と高さのパーセンテージです。100vwは幅の100％、80vwは80％などです。 これ%は、より一般的なユニットとまったく同じように見えます。 開発者ツールで、値をvw / vhから％に、またはその逆に変更してみたところ、同じ結果が得られました。 2つの間に違いはありますか？そうでない場合、なぜこれらの新しいユニットが導入されたのCSS3ですか？

138 css  viewport-units 

タイトルで述べたように、vwcssだけでスクロールバーなしで計算することは可能ですか？ たとえば、私の画面の幅は1920px。です。vw戻ります1920px、素晴らしい。しかし、私の実際の体幅はのようなものにすぎません1903px。 1903pxcssのみで値を取得する方法はありますか（の直接の子だけでなくbody）、またはこれにはJavaScriptが絶対に必要ですか？

88 css  viewport-units