Div 페이지 100 % 높이 응답

Question

검색을했지만 정확히 달성 할 수없는 것을 찾을 수 없습니다. 어쨌든 CSS가 도움이 될 수있는 jQuery 스크립트가 있는지 확실하지 않습니다.

내 웹 사이트에서 페이지의 전체 높이를 채우는 div를 만들려고합니다 (수직으로 채워진 첫 번째 영역의 스크롤 바로 아래의 영역을 넘어서는 안됨). 이 장치의 높이로 조정하려면 바탕 화면과 아이폰에 예를 들어, 전체 화면의 수직 높이가 채워집니다 싶습니다. 나는 웹 사이트를 게시 할 수있는 경우

나는 확실하지 않다 그러나 이것은 당신이 당신의 사업부는 당신이 할 수있는 페이지의 전체 높이를 원한다면 http://alexcerezo.com

Answer 1

후 해요 모양입니다 :

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

을

하거나,이 브라우저의 전체 높이되고 싶어 할 경우 : 문서가 $(document).ready() 즉 준비가되면

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

그냥이 라인 중 하나를 실행합니다. 그러나 div를 올바르게 중첩시키고 오른쪽 높이를 부모로 설정하여 CSS에서 height : 100 %를 사용하여 높이를 설정할 수 있습니다.

Answer 2

이것을하십시오!

HTML :

<div id="myDiv"> Content </div> 

CSS :

#myDiv 
{ 
    min-height: 100%; 
    max-height: 100%; 
} 

최대 및 최소 높이 그들이 브라우저를 축소하면이 포함 (윈도우의 높이보다 더 많거나 적게 차지하지 않습니다 보장 화면 높이보다 작음).

:

편집 : 닉의 의견은 신체와 HTML을 포함한 모든 부모 div의도 있어야합니다 또한 매우 중요하다 최소 - 최대 높이 100 %로 설정, 그것의 100 %로 다른 사업부의 의지 크기 부모 높이.

Answer 3

이렇게하는 데는 몇 가지 방법이 있습니다.

먼저 height:100vh;을 사용해 볼 수 있습니다. vh은 뷰포트 높이를 나타냅니다. 100vh은 뷰포트 높이의 100 %를 나타냅니다. (뷰포트 너비가 필요할 경우 vw를 사용하십시오.) 요소에 여백이 있고 문제가 생길 수 있으므로 문제가 발생할 수 있습니다.

아마 더 나은 다른 방법 :

top:0; 
bottom:0; 
position:absolute; 

이 모든 마진과 패딩을 무시하고 사업부 너무 많은 문제가 발생하지 않고 화면의 전체 높이를 차지합니다. 당신이 필요로하는 경우에, 당신은 또한 left:0; 및 right:0;

Fiddle