jQuery-Mobile内容区域头脚高度100% [英] JQuery-Mobile content area 100% height between head and foot
问题描述
这方面有很多话题......但不明白如何去做.
A lot of topics on this... but not getting the point how to do it.
我有我的 JQM 页眉和页脚.我希望内容区域填充头和脚之间的 100% 高度.
I have my JQM Header and Footer. I want the content area to fill the 100% height in between head and foot.
这是我的代码，怎么可能?
Thats my code, how is it possible?
<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 div 2 行，但不是 100%..
Actually the inner area only fills the height depending on the content... means 2 divs 2 rows, but not 100%..
谢谢
推荐答案
CSS position: fixed 在移动浏览器中无法正常工作.我的经验是使用 Android 和 iOS 浏览器，它们都没有正确地暗示 position:fixed(iOS 5 浏览器例外，但它仍处于测试阶段).
The CSS position: fixed doesn't work correctly in mobile browsers. My experience is with Android and iOS browsers and none of them impliment position: fixed properly (the exception is the iOS 5 browser but it's still in beta).
当用户在移动浏览器中滚动时，它往往被视为 position: absolute 并在页面滚动时移动，而不是将元素固定在屏幕上并且不移动它.
Rather than fixing an element to the screen and not moving it when the user scrolls in mobile browsers it tends to be treated like position: absolute and it moves when the page scrolls.
同样使用 CSS overflow 属性将不允许在大多数移动设备上滚动(iOS 支持它，但用户必须知道在可滚动 div 中滚动时使用两根手指).
Also using the CSS overflow property won't allow scrolling on most mobile devices (iOS supports it but the user has to know to use two fingers while scrolling in a scrollable-div).
您可以使用 CSS，但请注意您需要使用 position: absolute 或者您可以使用 JavaScript 设置元素的高度.
You can however use CSS but be aware you will need to use position: absolute or you can use JavaScript to set the heights on the elements.
这是一个使用 JavaScript 设置伪页面元素高度的 jQuery Mobile 解决方案:
Here is a jQuery Mobile solution using JavaScript to set the heights of the pseudo-page elements:
$(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);
});
要获得完美的效果，您需要考虑目标设备地址栏的行为，因为如果您想要全屏网页，则必须将地址栏的高度添加到页面的高度.
To get a flawless finish you need to take into consideration the behavior of the target device's address bar because if you want a fullscreen webpage then you have to add the height of the address bar to the height of the page.
这篇关于jQuery-Mobile内容区域头脚高度100%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
