标题 – JQuery-Mobile内容区域头和脚之间的100％高度

很多话题在这个…但没有得到点如何做到这一点。

我有我的JQM页眉和页脚。我希望内容区域填充头和脚之间的100％高度。

这是我的代码，怎么可能？

<body>
        <div data-role="page" id="entryPage" data-theme="d">
 
        <div data-role="header" id="header" data-position="fixed" data-theme="d">
            <h1>Page Title</h1>
        </div><!-- /header -->
 
        <div data-role="content" id="content" data-theme="d">
 
             <div id="columnwrapper">
                <div id="leftcolumn">
                    <div class="innertube">
                        Point 1
                    </div>
                    <div class="innertube">
                        Point 1
                    </div>
                </div>
            </div>
 
            <div id="rightcolumn">
                <div class="innertube">
                    <div id="switch1">
                        test
                    </div>
                </div>
                <div class="innertube">
                    test2
                </div>
 
            </div>
 
            <div id="contentcolumn">
                <div class="innertube">Content</div>
                <div class="innertube">Content</div>
            </div>
 
        </div><!-- /content -->
        <div data-role="footer"  id="footer" data-position="fixed" data-theme="d">
 
            <div id="switch2">
                <a href="#foo" data-role="button" data-icon="arrow-u">Expand main menu</a>
            </div>
 
        </div><!-- /footer -->
    </div><!-- /page -->
</body>

CSS：

#columnwrapper{
    float: left;
    width: 100%;
    margin-left: -75%; /*Set left margin to -(contentcolumnWidth)*/
    background-color: #C8FC98;
 
}
 
#leftcolumn{
    margin: 0 40px 0 75%; /*Set margin to 0 (rightcolumnWidth) 0 (contentcolumnWidth)*/
    background: #C8FC98;
}
 
#rightcolumn{
    float: left;
    width: 40px; /*Width of right column*/
    margin-left: -40px; /*Set left margin to -(RightColumnWidth)*/
    background: yellowgreen;
}
 
#contentcolumn{
    float: left;
    width: 75%; /*Width of content column*/
    background-color: blue;
}
 
.innertube{
    margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
 
}

实际上，内部区域仅根据内容填充高度…意味着2 divs 2行，但不是100％..

谢谢

解决方法

CSS位置：固定在移动浏览器中无法正常工作。我的经验是使用Android和iOS浏览器，而且没有任何一个隐含的位置：正确修复(例外是iOS 5浏览器，但仍处于测试阶段)。

当用户在移动浏览器中滚动时，不必将元素固定到屏幕上，而不是移动它，它往往被视为位置：absolute，当页面滚动时移动。

同样使用CSS overflow属性将不允许在大多数移动设备上滚动(iOS支持它，但用户必须知道在滚动滚动滚动滚动滚动条上使用两根手指)。

然而，您可以使用CSS，但请注意，您将需要使用position：absolute或您可以使用JavaScript来设置元素的高度。

这是一个使用JavaScript来设置伪页面元素高度的jQuery Mobile解决方案：

$(document).delegate('#page_name','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);
});

标题 – JQuery-Mobile内容区域头和脚之间的100％高度

解决方法

猜你在找的jQuery相关文章