Jquery는 페이지의 전체 너비와 높이를 응답하고 응답합니다.

div를 브라우저 창 전체 높이와 높이로 만들려고합니다. 여기에있는 코드는 다음과 같습니다. 그것은 작동하지 않습니다.Jquery는 페이지의 전체 너비와 높이를 응답하고 응답합니다.

jQuery를 :

<script type="text/javascript"> 
    var viewportWidth = $(window).width(); 
    var viewportHeight = $(window).height(); 

    $('#lordy').css('height', viewportHeight + 'px'); 
    $('#lordy').css('width', viewportWidth + 'px'); 

    $(window).resize(function() { 
     var viewportWidth = $(window).width(); 
     var viewportHeight = $(window).height(); 

     $('#lordy').css('height', viewportHeight + 'px'); 
     $('#lordy').css('width', viewportWidth + 'px'); 
    });

HTML 그냥 이것에 대한 CSS를 사용할 수 있습니다

<div id="lordly"></div>

CSS

#lordly { 
    background-color: #CB0011; 
}

출처

2013-09-30 Ghozt

바이올린을 포함 할 수 있습니까? 그러면 JS에 어떤 문제가 있는지 쉽게 알 수 있습니다. 또는 내 CSS 응답을 참조하십시오. –

귀하의 HTML 및 CSS가 "lordly"ID (addional l에 주목)를 참조하는 동안 귀하의 자바 스크립트는 항상 "#lordy"를 참조합니다. 이 문제는 –

일 수 있습니다. CSS를 사용하여 만 수행 할 수 있습니다. 이미 비슷한 질문이 많이 있습니다. [1] (http://stackoverflow.com/questions/1719452/how-to-make-a-div-always-full-screen), [2] (http : //stackoverflow.com/questions/3276226/how-to-make-a-full-screen-div-and-prevent-size-to-be-changed-by-content) – kasitan

, JS에 대한 필요가 없습니다.

먼저 HTML과 본문을 100 % 너비와 높이로 설정해야합니다. 아래 참조 :

html, 
body { 
    width: 100%; 
    height: 100%; 
} 

#lordly { 
    width: 100%; 
    height: 100%; 
}

#lordly가 본문의 직접적인 하위 항목 인 경우이 기능이 작동합니다. 또한

당신은 크로스 브라우저 호환성을 보장하기 위해 HTML과 몸에 마진과 패딩을 제거해야합니다 주목할 가치가

편집 : 완성도를 들어, JS의 문제는 jQuery를 선택기 #lordy을 찾고 있다는 것입니다 어디 ID로 실제로 lordly입니다 - 당신은 'l'이 없습니다.

출처

2013-09-30 08:07:05

내 JS 코드의 문제는 div 이름을 잘못 입력 한 것입니다. 대신 CSS를 사용하게되어서 고마워요. – Ghozt

감사합니다. @ Oke Oke – Ghozt

Jquery는 페이지의 전체 너비와 높이를 응답하고 응답합니다.

답변

관련 문제