将HTML页面划分为5部分

Question

我正在用jQuery手机和Phonegap开发移动应用程序。我想把一页分成五个部分，响应取决于屏幕的高度。我试过这个：

<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> 

我想要的是：爱默生

谢谢!

Answer 1

当您使用jQuery移动时，首先要做的是调整内容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%。

这是一个演示

如果您决定在页面中包含一个页眉和/或页脚，这也是可行的，因为缩放代码会考虑到这一点。

包含报头的演示

Answer 2

html,body{ height:100%; width:100%}

它将设置页面的高度。

Answer 3

第一个答案是正确的，但你会发现这也是有用的。

用div包装图像可能更容易，或者使用div使用CSS将图像设置为背景，除非您只想要直的图像，除非您计划使用大量嵌套和绝对定位，否则很难在顶部覆盖任何其他图像。我一直都这么做，在所有浏览器上都很好用(旧IE当然很烂，但我不再为它编写代码了)，如果您的客户端不希望从页面中轻松地提取图像，那么将图像放到背景中是一种简单的方法，它可以阻止大多数不钻研代码的用户。

在处理基于百分比的div时，使用css3箱式上浆将使您的生活更加轻松，因为您可能决定在div中添加填充，这将使事情变得疯狂。只需检查caniuse网站，以确保移动版本，您的目标支持框大小。它们中的大多数都是这样的，如果您想要使用旧的浏览器，那么应该在此链接上进行一些填充。它们通常是包含在头部或页脚中的JS文件，编码最少。

还建议您不要使用内联CSS (如果可以帮助的话)，也不要使用外部样式表。现在非常标准，除非你在做HTML电子邮件。我知道您可能知道这一点，并以这个片段为例，但我想我会提到它，以防万一。

在你的情况下，我会这样做：

HTML

<div class="wrap" data-role="content">   
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</div>

和css (尽管这个例子简化了)

div {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.wrap {width:100%; height:100%}
.wrap div {width:100%; height:20%}
.box1 {background:url('www/image/1.png') top left no-repeat; background-size:cover}
.box2 {background:url('www/image/2.png') center center no-repeat; background-size:100%}
.box3 {background:url('www/image/3.png') top center no-repeat; background-size:contain}
.box4 .......

你知道这个主意。而且有不止一种方法来调整背景，这就是为什么我展示了三个，我不知道你的图像是什么，所以我不知道你应该如何调整它们的大小。现代浏览器不需要在文件路径周围有“”，但我为后代添加了它。

使用上面的代码，您可以添加这一行CSS而不破坏页面：

.box1, .box2, .box3, .box4, .box5 {padding:20px}

然后，您可以添加文本，额外的div，标题，或任何您想要的，只要您的大小正确。例如：

<div class="box1"><h2>some title</h2><p>some meaningless text</p></div>

只要您使用CSS来定位这些其他元素，事情就会很好，您可能只需要添加几个@media查询，以确保它们在各种屏幕上正确地对齐和大小。

另外，您也可以使用CSS3的flex-box，但是对它的支持仍然有点错误，而且它更复杂，您可能需要一些后援。你可以在css技巧中读到更多关于flex-box的内容。我不能添加超过两个链接到这个给你直接的链接。

希望这能有所帮助。