Javascript 使用JQM，为什么子div不覆盖父级的宽度和高度

我有一个包含谷歌地图的JQM页面。JQM页面包含一个标题和一个内容部分。内容部分本身拥有谷歌地图

<div data-url="map-page" data-role="page" id="map-page" data-title="Test">

   <div data-role="header" data-position="fixed">
      <h1>my header</h1>
   </div><!-- /header -->
   <div role="main" id="map-canvas" class="ui-content">          
      <p>some text that doesn't show up after map loads</p>
   </div><!-- /content -->
   <div data-role="panel" data-position-fixed="true" data-display="push" data-theme="b" id="nav-panel">
      <h3>some random text here on this panel</h3>
   </div><!-- /panel -->
</div>

将JQM面板添加到页面时，地图不会显示。看

我注意到JQM在幕后所做的是添加一个div，其中包含一个类

.ui面板包装器

。这个div包装了content div。换句话说，它是页面的子级，包含content div。将

.ui面板包装器

添加到我的css页面可以解决我的问题。看

---

我的问题是：为什么？我很难处理CSS-为什么不直接为

地图画布设置高度？我认为它会覆盖它从panel wrapper div获得的任何值。这是我应该知道的基本CSS，还是JQM的一些花招正在发生？
与注释相关：

正如我所说，当您设置百分比高度样式时，父元素也必须具有高度样式

不会继承高度样式，您可以在参考中阅读详细信息：

基本上，您不需要为每个元素设置高度（每种类型的元素都有默认值），但是当您想要强制指定特定的百分比高度时，父元素也必须具有高度样式。当父元素也有一个百分比高度时，它的父元素也必须设置一个高度…以此类推。
在这种特定情况下，这意味着
#map_canvas
的所有祖先都必须具有高度样式（在添加选择器
.ui面板包装器时就是这种情况，其他祖先的高度将由自定义CSS或JQM设置）

#map_canvas
的祖先是
html>body>div#map page>div.ui-panel-wrapper
这是基本的CSS，为了能够计算百分比高度，父元素还必须有一个高度样式好的……显然我需要阅读CSS。我假设div将从父对象继承高度样式@molle博士你是说我需要为每个元素明确设置高度？
html, body {
    height: 100%;
    margin: 0px;
    padding: 0px
}

#map-page, #map-canvas {
   width: 100%;
   height: 100%;
   padding: 0px; 
 }

#map-page, #map-canvas, .ui-panel-wrapper{
  width: 100%;
  height: 100%;
  padding: 0px; 
}