如何使用 jquery 移动设备以百分比设置 2 行高度？

Question

我想使用 jquery 移动设备在一页中定义 2 行，并且我想按百分比进行。

<div data-role="content">
   <div id="divParteSuperior" style="height:300px;">
   </div>
   <div id="divParteInferior">
   </div>
</div>

当我使用高度时它起作用，但我需要使用百分比，如果我将高度设置为 60%，它不起作用。我搜索了是否可以使用 jquery 移动网格来完成，但它只讨论列。我想使用整个页面的高度。

我正在尝试做这样的事情：

你能帮帮我吗？

Answer 1

$("#divParteSuperior, #divParteInferior").height($(window).height()/2 + "px")

这就是 jQ 答案。 你可能想把它放在 $(window).resize();

CSS 答案是：

1) 使内容继承 <body> 和 <html> 的 100% 高度，这样您就可以制作具有 % 高度的 div

2) 使用 vh 而不是 %（在没有 polyfill 的情况下在移动设备上不太受支持）

3) 使用显示 table 或 flexbox

Answer 2

让内容占设备高度见这篇文章： https://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

设置内容高度后，您就可以在行 DIVS 上使用百分比高度。请注意，默认情况下，jQM 中的内容 div 具有填充。

<div data-role="page">
    <div role="main" class="ui-content">
       <div id="divParteSuperior" >
       row 1
       </div>
       <div id="divParteInferior">
       row 2
       </div>
    </div>
</div>

function contentHeight() {
    var screen = $.mobile.getScreenHeight(),
        contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height(),
        content = screen - contentCurrent;
    /* apply result */
    $(".ui-content").height(content);
}

$(document).on("pagecontainertransition", contentHeight);
$(window).on("throttledresize orientationchange", contentHeight);

.ui-content {
  background: blue;
  padding: 0;
}
#divParteSuperior {
  background: green;
  height: 60%;
}
#divParteInferior {
  background: red;
  height: 40%;
}

如何使用 jquery 移动设备以百分比设置 2 行高度？

How to set 2 rows height in percent using jquery mobile?

html

css

jquery-mobile

DEMO