时间戳

首页 > 解决方案 > 使用 jQueryMobile CSS 的网页分割问题

javascript - 使用 jQueryMobile CSS 的网页分割问题

问题描述

我分别面临按高度和宽度划分网页的问题。在我的代码中，我还使用 jquery-mobile 代码及其 CSS 文件。如果我删除 jquery-mobile CSS 文件就可以了，但是有了它，页面划分就不好了。

我在我的 div 标签中使用数据角色。我的代码如下

<div data-role = "page" id ="home">

    <div  id= "header"  data-role = "header" data-position="fixed">
        <h1>Earth Quake System</h1>
        <a id = "refresh" href="#" data-icon="refresh" class = "ui-btn-right">Refresh</a>
    </div> 

    <div id="map-content"  class = 'map-content' data-role="content">
        <div id="map"></div>     

        <div id="content-details"> 
            <p>I am facing problem here</p>
        </div>
    </div>
</div>

我的CSS代码如下

#home {
    height: 100%;
    width: 100%;
}

#header {
    height: 10%;
    width: 100%;
}

#map-content{
    height: 90%;
    padding: 0px; 
    margin:0px;
    z-index: -1;
} 

#map{
    height: 100%;
    width: 80%;
}

#content-details{
    height: 100%;
    width: 20%;
}

这是我运行此代码时的输出

在此处输入图像描述

标签： javascriptjqueryhtmlcssjquery-mobile

解决方案

使用 JQM 框架的网格系统，这里面有你需要的东西（即在较小的屏幕尺寸和纵向视图中响应。如果你需要一些自定义，你总是可以轻松地覆盖默认的 JQM 样式。只需设置所需的百分比每个的宽度。block

这里的关键点是：您需要在显示地图页面后初始化地图。

演示：

var map;

function canvasHeight(canvas) {
  var mapPage = $("#page-map"),
    screen = $.mobile.getScreenHeight(),
    header = $(".ui-header", mapPage).hasClass("ui-header-fixed") ? $(".ui-header", mapPage).outerHeight() - 1 : $(".ui-header", mapPage).outerHeight(),
    footer = $(".ui-footer", mapPage).hasClass("ui-footer-fixed") ? $(".ui-footer", mapPage).outerHeight() - 1 : $(".ui-footer", mapPage).outerHeight(),
    newHeight = screen - header - footer;
  $(canvas).height(newHeight);
}

$(window).on("throttledresize orientationchange", function() {
  canvasHeight("#map");
})

function showLocation() {
  map.locate({setView: true,maxZoom: 16});
}

function loadMap(canvas) {
  map = L.map(canvas).setView([39.46975, -0.37739], 11);
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
}

$(document).on("pagecontainershow", function(e, ui) {
  if (ui.toPage.prop("id") == "page-map") {
    canvasHeight("#map");
    if (!map) {
      loadMap("map");
    }
  }
});
#page-map .ui-content {
  margin: 0;
  padding: 0;
}

#page-map .ui-block-b {
  margin: 0;
  padding: 1em;
}

#page-map .footer {
  position: fixed;
  z-index: 1000;
  bottom: .1em;
  width: 100%;
}

#map-attribution {
  font-size: small;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
}

.leaflet-control-attribution.leaflet-control {
  display: none;
}

/* Don't show scrollbars on SO code snippet */
.ui-mobile .ui-page {
  min-height: 100px !important;
}
<!DOCTYPE html>
<html>
<head>
  <title>Earth Quake System</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
</head>
<body>
  <div data-role="page" id="page-map">
    <div data-role="header" data-position="fixed" data-theme="a">
      <h1>Earth Quake System</h1>
    </div>

    <div data-role="content">
      <div class="ui-grid-a">
        <div class="ui-block-a">
          <div id="map"></div>
        </div>
        <div class="ui-block-b">
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        </div>
      </div>
      <div class="footer">
        <div id="map-attribution">
          <a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade
        </div>
      </div>
    </div>
  </div>
</body>

学分：从伟大的奥马尔canvasHeight那里得到灵感的功能在这里的答案：设置内容高度 100% jquery mobile

推荐阅读