머리글과 바닥글 사이의 공간을 채우기 위해 jQuery Mobile에서 콘텐츠 높이를 어떻게 정확하게 계산할 수 있습니까?

jQuery Mobile을 사용하여 웹 페이지에 대한 콘텐츠 높이 계산 향상

jQuery Mobile 웹 페이지에서 머리글과 바닥글 사이의 공간을 효과적으로 채우려면 , 콘텐츠 높이를 정확하게 계산하는 것이 중요합니다. 이를 위해서는 약간의 공백이 생길 수 있는 고정 툴바의 영향을 고려해야 합니다.

Solution for jQuery Mobile >= 1.3

var screen = $.mobile.getScreenHeight();

var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight()  - 1 : $(".ui-header").outerHeight();

var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

/* content div has padding of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

$(".ui-content").height(content);

jQuery Mobile용 솔루션

버전 1.2 이하의 고정 도구 모음에는 1px 여백이 적용되지 않으므로 계산이 단순화됩니다.

var header = $(".ui-header").outerHeight();

var footer = $(".ui-footer").outerHeight();

전체 해상도

콘텐츠 div 주위의 패딩을 고려하려면 콘텐츠 변수를 직접 조정하거나 패딩 값을 빼세요. (32px) contentCurrent 변수에서. 또한 고정 도구 모음이 있는 경우 외부 높이() 측정에서 1픽셀을 제거하세요.

위 내용은 머리글과 바닥글 사이의 공간을 채우기 위해 jQuery Mobile에서 콘텐츠 높이를 어떻게 정확하게 계산할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!