Question

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

我在div标签中使用了data-role。我的代码正在

<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%;
}

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

Answer 1

使用JQM框架的grid system，它具有您所需要的内容（即responsive，用于较小的屏幕尺寸和 portrait 视图。如果需要一些自定义，您始终可以轻松覆盖默认的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函数的灵感来自出色的Omar，在这里的答案是：set content height 100% jquery mobile

使用jQueryMobile CSS进行网页分割的问题

1 个答案: