Javascript 使用jQueryMobile CSS进行网页分割时出现问题

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

我正在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>

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

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

使用JQM框架，它具有您所需的内部内容（即在较小的屏幕尺寸和纵向视图中）。如果您需要一些自定义，您可以随时轻松覆盖默认的JQM样式。只需设置每个

块所需的宽度百分比即可

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

演示：


var映射；
功能画布高度（画布）{
var mapPage=$（“#页面映射”），
screen=$.mobile.getScreenHeight（），
header=$（“.ui header”，mapPage）.hasClass（“ui header已修复”）？$（“.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=屏幕-页眉-页脚；
$（画布）.高度（新高度）；
}
$（window）.on（“throttledresize-orientationchange”，function（）{
画布高度（“地图”）；
})
函数showLocation（）{
locate（{setView:true，maxZoom:16}）；
}
函数加载图（画布）{
map=L.map（canvas）.setView（[39.46975，-0.37739]，11）；
L.tileLayer（“https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”）.addTo（map）；
}
$（文档）.on（“pagecontainershow”，函数（e，ui）{
if（ui.toPage.prop（“id”）=“页面映射”）{
画布高度（“地图”）；
如果（！map）{
装载图（“地图”）；
}
}
})；
#页面地图.用户界面内容{
保证金：0；
填充：0；
}
#页面映射。ui-block-b{
保证金：0；
填充：1em；
}
#页脚{
位置：固定；
z指数：1000；
底部：1米；
宽度：100%；
}
#地图属性{
字体大小：小；
文本对齐：居中；
背景：rgba（255，255，255，0.7）；
}
.传单控制-归因。传单控制{
显示：无；
}
/*不要在SO代码段上显示滚动条*/
.ui mobile.ui页面{
最小高度：100px！重要；
}

地震系统
地震系统
“Lorem ipsum door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。”
地图数据©；2011 OpenStreetMap贡献者，图像©；2012 CloudMake
Div元素默认为块级元素，这意味着它们占据了可用的全部宽度并从新行开始。您可以尝试将这些Div的CSS属性更改为
display:inline
或
display:inline block
或允许两个Div存在于同一“行”上的各种其他显示类型@tshimkus或使用地图上的
float:left
div@tshimkus，我使用过，但不起作用（这是否回答了您的问题？还有一个问题尚未讨论，那就是两个div不能同时显示在同一行中的情况可能是80%+20%的容器宽度。这可能是从浏览器继承的边距，或者是禁止完全100%宽度可用的情况。