可視領域に基づいてdivの高さを設定する

Question

次のHTMLでは、手作業でdivの高さを200ピクセルに設定しました。 divの高さがブラウザの可視領域の高さに等しくなるように、この高さを自動的に調整するにはどうすればよいですか？純粋なCSSでこれを行うことはできますか、JavaScriptが必要ですか？

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p> 

<div class="parallax"></div> 

<div class="red"> 
Scroll Up and Down this page to see the parallax scrolling effect. 
This div is just here to enable scrolling. 
Tip: Try to remove the background-attachment property to remove the scrolling effect. 
</div> 

とCSS：

.parallax { 
    /* The image used */ 
    background-image: url("http://az-themes.bluxart.netdna-cdn.com/ibuki/wp-content/uploads/2014/06/blog-img.jpg"); 

    /* Set a specific height */ 
    height: 200px; 

    /* Create the parallax scrolling effect */ 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 

} 

.red { 
    height:1000px; 
    background-color:red; 
    color:white; 
    font-size: 40px; 
} 

Wokring例はhereを見つけることができます。

Answer 1

これにはvhユニットを使用してください。そのため、200pxは100vhになり、画面の全体の高さが表示されます。

コンテンツがビューポートよりも多く表示される時間は、min-heightを必ず入力してください。この互換性に関しては

：

http://caniuse.com/#feat=viewport-units

のFirefox：Firefoxの19（2013）以来、サポート

クロム：クロム20（2012）以来、一部からサポート、クロム26はトータルサポート（2013）

サファリ：サファリ6.1（2013年）以来のトータルサポート、サファリ6（2012）以来、部分的にサポートされているので、

IE：IE 9（2011）以来の部分的なサポート

エッジ：エッジ12（2015）

が、私はこれらすべてのケースでは、彼らは、vmaxをサポートしていないということである、部分的なサポートを言うとき以来、一部サポートされとにかくこれを使用していません。

.parallax { 
 
    /* The image used */ 
 
    background-image: url("http://az-themes.bluxart.netdna-cdn.com/ibuki/wp-content/uploads/2014/06/blog-img.jpg"); 
 
    /* Set a specific height */ 
 
    height: 100vh; 
 
    /* Create the parallax scrolling effect */ 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
.red { 
 
    height: 1000px; 
 
    background-color: red; 
 
    color: white; 
 
    font-size: 40px; 
 
}

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p> 
 

 
<div class="parallax"></div> 
 

 
<div class="red"> 
 
    Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect. 
 
</div>

また、ウィンドウの高さを取得するために.height()を使用して、jQueryのを使用してこれを行うことができます。

$(document).ready(function() { 
 

 
    wh = $(window).height(); 
 

 
    $(".parallax").css({ 
 
    "height": wh 
 
    }); 
 

 
});

.parallax { 
 
    /* The image used */ 
 
    background-image: url("http://az-themes.bluxart.netdna-cdn.com/ibuki/wp-content/uploads/2014/06/blog-img.jpg"); 
 
    /* Set a specific height */ 
 
    height: 100vh; 
 
    /* Create the parallax scrolling effect */ 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
.red { 
 
    height: 1000px; 
 
    background-color: red; 
 
    color: white; 
 
    font-size: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p> 
 

 
<div class="parallax"></div> 
 

 
<div class="red"> 
 
    Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect. 
 
</div>