Question

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

谢谢！

Answer 1

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

它将设置页面高度

Answer 2

第一个答案是正确的，但您可能会觉得这也很有用。

将图像包装在div中可能更容易，或者使用div并使用CSS将图像设置为背景，除非您只是想要直接图像，除非您打算使用大量的图像，否则可能难以覆盖其他任何内容嵌套和绝对定位。我一直这样做，它在所有浏览器中都很好用（旧的IE当然很糟糕，但我不再为它编码了），如果你的客户不希望从页面轻松拉出图像，那么放入图像背景是一种简单的方法，可以阻止大多数不会深入研究代码的用户。

在处理基于百分比的div时，使用css3 box-sizing将使您的生活更轻松，因为您可能决定向div添加填充，这将使事情变得疯狂。只需检查caniuse dot com，确保您定位的移动版本支持大小调整。他们中的大多数都这样做，如果您想要旧浏览器的后备，那么this link应该有一些polyfill。它们通常是包含在头部或页脚中的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，但对它的支持仍然有点bug，而且它更复杂，你可能需要一堆后备。您可以在css-tricks上阅读有关flex-box的更多信息。我无法添加两个以上的链接来为您提供直接链接。

希望有所帮助。

Answer 3

当您使用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 ，其中包含标题

Answer 4

好的，你走了。我添加了一些标题和类似的媒体查询，以便您可以根据屏幕大小/浏览器窗口查看如何轻松地重新设置内容。你显然需要你的html，head和body标签。

这是working fiddle。

如果您仍需要解释，请告诉我。我个人使用这种方法，因为它很快，纯粹是html和css2 / 3。如我在第一次回复中所示，您将放入图像的路径而不是背景颜色。

我还添加了2px的填充，只是为了告诉你它不会破坏。你可以使它更高，但在小的jsfiddle区域，它会使文本溢出而不调整字体。

HTML

<div class="wrap">
    <div class="box box1">
        <h2>Title 1</h2>
        <p>meaningless text</p>
    </div>
    <div class="box box2">
    <h2>Title 2</h2>
        <p>meaningless text</p>
    </div>
    <div class="box box3">
        <h2>Title 3</h2>
        <p>meaningless text</p>
    </div>
    <div class="box box4">
        <h2>Title 4</h2>
        <p>meaningless text</p>
    </div>
    <div class="box box5">
        <h2>Title 5</h2>
        <p>meaningless text</p>
    </div>
</div>

CSS

html, body {width:100%; height:100%; margin:0; padding:0; font-family:'Helvetica Neue', Helvetica, sans-serif; font-size:16px}
div {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.wrap {width:100%; height:100%}
.box {width:100%; height:20%; text-align:center; padding:2px}
.box1 {background:#555}
.box2 {background:#777}
.box3 {background:#999}
.box4 {background:#aaa}
.box5 {background:#ccc}
h2 {color:#fff;font-size:1.3em;margin-bottom:0}
p {font-size:.85em; font-weight:300; color:#ffcc00; margin-top:-4px}
@media only screen and (max-width: 360px) {
    h2 {font-size:.9em}
    p {font-size:.7em}
}

修改：here's the fiddle with hover states added。

将HTML页面分为5个部分

4 个答案: