jQuery 모바일 콘텐츠의 높이를 100%로 만드는 방법은 무엇입니까?

jQuery Mobile에서 콘텐츠 높이를 100%로 설정

jQuery Mobile에서는 콘텐츠 높이를 100%로 설정하는 것이 어려울 수 있습니다. 특히 콘텐츠와 바닥글 사이에 공백이 있는 경우에는 사용 가능한 공간이 필요합니다.

CSS 구현

다음 CSS 코드는 원하는 결과를 얻기에 충분하지 않을 수 있습니다.

.ui-content {
  background: transparent url('./images/bg.jpg');
  background-size: 100% 100%;
  min-height: 100%;
  color: #FFFFFF;
  text-shadow: 1px 1px 1px #000000;
}

솔루션

향상된 솔루션은 다음을 고려합니다. 머리글 및 바닥글 도구 모음이 고정되어 있는지 여부. 그렇다면 코드는 음수 여백을 고려하여 외부 높이에서 1px을 빼야 합니다.

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. Subtract this value if desired. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

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

jQuery Mobile용 <= 1.2:

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

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

추가 참고 사항

• 페이지에 고정 도구 모음이 있는 경우 데스크톱 브라우저에서 콘텐츠가 1픽셀씩 스크롤됩니다.
• 모바일 기기에서는 본문 및 .ui-page 높이로 인해 페이지가 스크롤되지 않을 수 있습니다. 설정합니다.

위 내용은 jQuery 모바일 콘텐츠의 높이를 100%로 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!