的 DEMO

Question

我想使用jquery mobile在一个页面中定义2行，我想以百分比形式进行。

 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
       package="com.ciceroneltd.cicero">

 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

 <application
     android:allowBackup="true"
     android:icon="@mipmap/ic_launcher"
     android:label="@string/app_name"
     android:supportsRtl="true"
     android:theme="@style/AppTheme">
     <activity
         android:name=".MainActivity"
         android:label=""
         android:theme="@style/AppTheme.NoActionBar">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />

             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
     </activity>


     <meta-data
         android:name="com.google.android.geo.API_KEY"
         android:value="@string/google_maps_key" />

    <meta-data
         android:name="com.google.android.geo.API_KEY"
         android:value="@string/places_api_key" />

 </application>

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

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

using self reference links

你能帮我吗？

Answer 1

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

这是jQ的答案。你可能想把它放在$（window）.resize（）;

CSS答案是：

1）使内容从<body>和<html>继承100％高度，以便您可以使用％height生成div

2）使用vh而不是％（没有polyfill的移动设备支持得很好）

3）使用display 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 mobile设置2行高度百分比？

2 个答案:

的 DEMO