Bagaimana untuk Membuat Kandungan Mudah Alih jQuery 100% Tinggi?

Menetapkan 100% Ketinggian untuk Kandungan dalam jQuery Mobile

Dalam jQuery Mobile, adalah sukar untuk menetapkan ketinggian kandungan kepada 100% daripada ruang yang ada, terutamanya jika terdapat ruang antara kandungan dan pengaki.

CSS Pelaksanaan

Kod CSS berikut mungkin tidak mencukupi untuk mencapai hasil yang diingini:

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

Penyelesaian

Penyelesaian yang dipertingkatkan mempertimbangkan sama ada bar alat pengepala dan pengaki ditetapkan. Jika ya, kod mesti menolak 1px daripada ketinggian luarnya untuk mengambil kira jidar negatif.

Untuk 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);

Untuk jQuery Mobile <= 1.2:

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

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

Nota Tambahan

• Jika bar alat tetap hadir pada halaman, kandungan akan menatal sebanyak 1px pada penyemak imbas desktop.
• Pada peranti mudah alih, halaman mungkin tidak menatal kerana ketinggian badan dan .ui-halaman tetapan.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Kandungan Mudah Alih jQuery 100% Tinggi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!