- 首页
- 其他开发
- JQuery-Mobile 内容区域 100% 头脚高度
JQuery-Mobile 内容区域 100% 头脚高度
[英] JQuery-Mobile content area 100% height between head and foot
本文介绍了JQuery-Mobile 内容区域 100% 头脚高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有很多关于这个的话题......但不知道如何去做.
我有我的 JQM 页眉和页脚.我希望内容区域填充头和脚之间的 100% 高度.
这是我的代码，怎么可能?
<div data-role="page" id="entryPage" data-theme="d"><div data-role="header" id="header" data-position="fixed" data-theme="d"><h1>页面标题</h1></div><!--/header --><div data-role="content" id="content" data-theme="d"><div id="columnwrapper"><div id="leftcolumn"><div class="内胎">第 1 点
<div class="内胎">第 1 点
<div id="rightcolumn"><div class="内胎"><div id="switch1">测试
<div class="内胎">测试2
<div id="contentcolumn"><div class="innertube">内容</div><div class="innertube">内容</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">展开主菜单</a>
</div><!--/footer --></div><!--/page -->
CSS:
#columnwrapper{向左飘浮;宽度:100%；左边距:-75%；/*设置左边距为-(contentcolumnWidth)*/背景色:#C8FC98；}#左列{边距:0 40px 0 75%；/* 设置边距为 0 (rightcolumnWidth) 0 (contentcolumnWidth)*/背景:#C8FC98；}#右列{向左飘浮;宽度:40px；/*右列的宽度*/左边距:-40px；/*设置左边距为-(RightColumnWidth)*/背景:黄绿色；}#内容列{向左飘浮;宽度:75%；/*内容列的宽度*/背景颜色:蓝色；}.内管{边距:0px；/*每列内部DIV的边距(提供填充)*/边距顶部:0；}
实际上内部区域仅根据内容填充高度...意味着2个divs 2行，但不是100％..
谢谢
解决方案
CSS position: fixed 在移动浏览器中无法正常工作.我的经验是使用 Android 和 iOS 浏览器，但它们都没有正确地暗示 position: fixed(iOS 5 浏览器除外，但它仍处于测试阶段).
当用户在移动浏览器中滚动时，它倾向于被视为 position: absolute 并在页面滚动时移动，而不是将元素固定到屏幕上并且不移动它.
此外，使用 CSS overflow 属性将不允许在大多数移动设备上滚动(iOS 支持它，但用户必须知道在可滚动的 div 中滚动时使用两根手指).
然而，您可以使用 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="页脚"]').height());$(this).height($(window).height()).find('[data-role="content"]').height(the_height);});
要获得完美的效果，您需要考虑目标设备地址栏的行为，因为如果您想要全屏网页，则必须将地址栏的高度添加到页面的高度.
A lot of topics on this... but not getting the point how to do it.
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;
}
Actually the inner area only fills the height depending on the content... means 2 divs 2 rows, but not 100%..
Thanks
解决方案
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).
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.
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).
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.
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屋！
查看全文
