divのコンテナの高さを設定するにはどうすればよいですか？たとえば、画面の高さの60％にする必要がありますか？ ブラウザウィンドウのサイズが変更されていない場合、CSSの高さを60％に設定すると問題はありません。しかし、私がブラウザウィンドウを縮小すると、divはそれに応じて縮小します。 https://zurb.comは素晴らしい例です。 「Mission Accomplished」では、ブラウザウィンドウのサイズが変更されていても、グレーの部分は常に同じ高さになります。どのようにこれを保証することができますか？ HiDpiのサポートを確保するためにpxを使用したくありません。ブラウザの高さではなく画面の高さで高さを設定する方法
おかげで、
問題のページには、単にそれは同じ高さを有する常にます（と高さの60%ならないことを意味し、問題の要素の固定高さ（px）を使用している間ビューポートの高さに関係なく）。要素をビューポートに対して相対的にするには、viewport-sized typographyを探しています。
高さに基づいて調整するには、CSSユニットvhが必要です。これは、該当する要素にビューポートの高さに基づいてスケールするように指示します。また、vwを使用して、ビューポートの幅に基づいてスケールを調整することもできます。
<body>がmargin: 8pxのデフォルトを持っていることを覚えておいてください、あなたは、ビューポートサイズのタイポグラフィを使用するときにスクロールバーを避けたい場合は、あなたも0にこのバックを無効にする必要があります。 CSSユニットのより詳細な情報については
body {
margin: 0;
}
div {
height: 60vh;
width: 100vw;
background: red;
}<div></div>、私はthis guideをチェックアウトしてお勧めします。
希望すると便利です。 :)
これは単純な固定高さの要素です。画面サイズとは関係ありません。
pxを使用するだけで何も心配する必要はありません。 pxは論理ピクセルを意味し、任意のDPIで動作します。
ありがとう、pxが任意のDPIでこの問題なく動作することを知らなかった。 –
JS APIを使用して画面の高さを取得し、次にそれを複数の割合で取得する必要があります。 – jhpratt
したがって、ページが最初にレンダリングされたときに画面の高さを保存し、ブラウザのサイズの変更に関係なく正確な寸法を保持したいと思っていますか？うん、それはJSが必要になります。 –
そのウェブサイトは固定された高さであり、画面の高さとは関係ありません。 – SLaks