보이는 영역을 기준으로 div의 높이를 설정하십시오.

Question

다음 HTML에서 중간 div의 높이를 200px로 수동 설정했습니다. 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

파이어 폭스 : 이것의 호환성에 관해서

파이어 폭스 19 (2013)

크롬 서포트은 크롬 20 (2012), 크롬 (26)으로부터 총 지원 때문에 부분적 서포트 (2013)

사파리 : 사파리 6 (2012), 사파리 6.1 (2013)으로부터 총 지원

때문에 부분적 서포트

IE : IE 9 (2011) 이후 부분 지원

에지 : 에지 12 (2015)

내가이 모든 경우에 그들이, vmax을 지원하지 않는다는 것입니다, 부분적인 지원을 말할 때부터 일부 지원하는 당신은 이것을 위해 어쨌든 사용하지 않습니다. 창 높이를 얻을 수 .height()를 사용하여

.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>

또한 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>