Question

我遇到了这个问题。背景也在我的所有页面上，我只想在家里。然而，在其他页面上，它显示为header下的横幅。

enter image description here

我无法让图片在jsfiddle上运行，但这里是 link

另外，如何摆脱滚动条？

    <title>title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>

    $(document).delegate('#Home', 'pageshow', function () {
    var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
    $(this).height($(window).height()).find('[data-role="content"]').height(the_height);
    });
</script>
<script>

function limitTextCount(limitField_id, limitCount_id, limitNum)
    {
        var limitField = document.getElementById(limitField_id);
        var limitCount = document.getElementById(limitCount_id);
        var fieldLEN = limitField.value.length;

        if (fieldLEN > limitNum)
            {
                limitField.value = limitField.value.substring(0, limitNum);
            }
        else
            {
                limitCount.innerHTML = (limitNum - fieldLEN) + ' character(s) left..';
            }
    }

</script>


<style type="text/css">
.ui-content {
overflow:hidden;
background: transparent url(landscape.jpg);
background-size :cover;
color:#FFFFFF;
text-shadow:1px 1px 1px #000000;
}

.ui-page {
background: transparent;
}
</style>

#textarea-sendEmail
    {

    resize:none;
    height:150px; 
    min-height:150px;  
    max-height:150px;   
    }

<div data-role="header" data-position="fixed" >
    <h1 style="text-align:left; margin-left:40px;">Home</h1>
    <a href="#bars" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a>
</div><!-- /header -->

<div data-role="content" id="Home">
    <p>Home.</p>
</div><!-- /content -->

<div data-role="footer" data-position="fixed">
    <h4>Page Footer</h4>
</div><!-- /footer -->

<div data-role="panel" id="bars" data-theme="b" >
    <!-- panel content goes here -->
    <ul data-role="listview" >
        <li data-icon="home"><a href="#Home">Home</a></li>
        <li data-icon="clock"><a href="#Tee Times">Tee Times</a></li>
        <li data-icon="shop"><a href="#Rates">Rates</a></li>
        <li data-icon="action"><a href="#Scorecard">Scorecard</a></li>
        <li data-icon="info"><a href="#Contact Us">Contact Us</a></li>
    </ul>
</div><!-- /panel -->

Answer 1

JQM在页面加载时为页面设置最小高度约230px，因此背景不会填满整个页面

因此您需要窗口的实际高度并将其设置为最小值。您可能需要从总窗口高度调整负120像素，但在演示

中看起来没问题

背景出现在所有页面上，因为您使用了所有页面使用的.ui-content类。请使用#home ID，以便仅针对该内容

var wh = $(window).height() - 120
$(".ui-content").css("min-height", wh+"px");

window.onresize = function(event) {
var wh = $(window).height() - 120
$(".ui-content").css("min-height", wh+"px");
};

演示

http://jsfiddle.net/wqL5yw1q/

还有这个方法

https://jqmtricks.wordpress.com/2014/12/01/content-div-height-css-solution/

Answer 2

要摆脱滚动条，您需要将overflow:hidden;放在<html>上。

背景图片问题

2 个答案: