html - 将HTML页面分为5部分

我正在使用jQuery Mobile和Phonegap开发移动应用程序。我想将页面分为5部分，并根据屏幕的高度进行响应。
我尝试了这个：

<div data-role="content" style="width:100%; height:100%">
    <img src="www/image/1.png" style="width:100%; height:20%">
    <img src="www/image/2.png" style="width:100%; height:20%">
    <img src="www/image/3.png" style="width:100%; height:20%">
    <img src="www/image/4.png" style="width:100%; height:20%">
    <img src="www/image/5.png" style="width:100%; height:20%">
</div>

我想要的是：
emaple

谢谢！

最佳答案

在使用jQuery Mobile时，要做的第一件事是调整内容div的大小以填充屏幕。看一下：http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/。

将内容保持在设备屏幕高度的脚本是：

function ScaleContentToDevice(){
    scroll(0, 0);
    var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
    $(".ui-content").height(content);
}

$(document).on( "pagecontainershow", function(){
    ScaleContentToDevice();
});

$(window).on("resize orientationchange", function(){
    ScaleContentToDevice();
});

接下来，将5张图片放入内容div中，例如：

<div data-role="page" id="page1">
    <div role="main" class="ui-content">
        <img src="http://lorempixel.com/800/300/technics/1/" />
        <img src="http://lorempixel.com/800/300/technics/2/" />
        <img src="http://lorempixel.com/800/300/technics/3/" />
        <img src="http://lorempixel.com/800/300/technics/4/" />
        <img src="http://lorempixel.com/800/300/technics/5/" />
    </div>
</div>

最后使用CSS调整图像大小：

.ui-content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-image-width: 0;
}
img {
    display: block;
    width:100%;
    height:20%;
    padding: 0;
    margin: 0;
    border: 0;
    border-image-width: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

第一条规则从内容div中删除所有填充，边距，边框等。第二个调整图像的大小，因此每个图像占内容div的20％。


  这是一个DEMO


如果您决定在页面上包含页眉和/或页脚，这也是可行的，因为缩放代码已将此考虑在内。


  DEMO其中包含标题