使用jQuery和jquery css时WebPage出现问题

Question

我正面临网页分别按高度和宽度划分的问题。在我的代码中，我还使用了jquery-mobile代码及其CSS文件。如果我删除jquery-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%;
}

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

Answer 1

使用JQM框架的grid system，它具有您所需要的内容（即，在较小的屏幕尺寸和portrait