divの高さは100％でサイズは変更できません

Question

私のページを完全にカバーするdivが必要ですが、ブラウザウィンドウのサイズを変更するとdivのサイズを変更したくありません。換言すれば、この100％の高さは、実際のウィンドウサイズを指すべきではなく、最大ウィンドウサイズを指すべきである。

私はブラウザウィンドウの最大高さを計算したいと思います。私はdivにその高さを持たせたいと思います。これは固定された高さである必要がありますので、サイズを変更するとウィンドウがスクロールバーに表示され、コンテンツをスクロールさせます。

たとえば、このウェブサイトにアクセスした場合：http://weareflourish.com/メインページには、 （異なる解像度でウェブサイトにアクセスした場合でも）。私は同じ効果を再現したい

Answer 1

これは純粋なCSSでは不可能です。

次の3つの異なる値を持っている：あなたは、画面の解像度に依存することはできません

（固定）

ブラウザ寸法（動的）

ビューポートの寸法（動的）

1. 画面解像度をこれはあなたのビューポートの実際のサイズであることを保証することはできないためです。代わりに、ブラウザまたはビューポートのディメンションに依存する場合は、ブラウザのサイズ変更時に変化する動的なサイズが問題になります。

   唯一できることは、javascriptを使用してビューポートのサイズを決定し、divをこの特定のサイズに設定することです。この方法では、ビューポートのサイズ変更で変更されません。

   let div = document.querySelector("#yourElement"), 
    
   height = window.innerHeight, width = window.innerWidth; 
    
   
    
   div.style.height = `${height}px`; 
    
   div.style.width = `${width}px`;

   div{ 
    
   border:1px solid red; 
    
   box-sizing:border-box; 
    
   } 
    
   html,body,div{margin:0;padding:0;}

   <div id="yourElement"> 
    
   </div>

   より複雑な方法は、画面の解像度を取得し、ブラウザビューポートサイズの差を計算し、画面解像度からそれを減算するあります。これにより、最大ビューポートサイズの見積もりが得られるかもしれませんが、これはクロスプラットフォームの堅牢性がわかりません。

   私はあなたがこれをやろうとする理由があるかもしれないことは知っていますが、これがあなたの問題を解決するために本当に必要であれば、一歩前進してください。

Answer 2

最初に、CSSビューポートの高さ（vh）を使用して<div>の高さを設定します。ページの読み込み時に正しい高さになるように、CSSでこれを行います。

div.fullheight { 
    height: 100vh; 
} 

次に、jQueryを使用してこの高さをピクセル単位で取得し、高さCSSとして再適用します。

$('div.fullheight').css('height', $('div.fullheight').height());