JQuery-Mobile内容区域的头部和脚部之间的高度为100％ [英] JQuery-Mobile content area 100% height between head and foot
问题描述
关于这方面的很多话题......但没有明确指出如何去做。
我有我的JQM页眉和页脚。我希望内容区能够填充头部和脚之间的100％高度。
这就是我的代码，它怎么可能？
<体>
< div data-role =pageid =entryPagedata-theme =d>
< div data-role =headerid =headerdata-position =fixeddata-theme =d>
< h1>页面标题< / h1>
< / div><！ - / header - >
< div data-role =contentid =contentdata-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>内容< / div>
< div class =innertube>内容< / div>
< / div>
< / div><！ - / content - >
< div data-role =footerid =footerdata-position =fixeddata-theme =d>
< div id =switch2>
< a href =＃foodata-role =buttondata-icon =arrow-u>展开主菜单< / a>
< / div>
< / div><！ - / footer - >
< / div><！ - / page - >
< / body>
CSS：
#columnwrapper {
float：left;
宽度：100％;
保证金余额：-75％; / *将左边距设置为 - （contentcolumnWidth）* /
背景颜色：＃C8FC98;
}
#leftcolumn {
margin：0 40px 0 75％; / *将边距设置为0（rightcolumnWidth）0（contentcolumnWidth）* /
background：＃C8FC98;
}
#rightcolumn {
float：left;
width：40px; / *右栏宽度* /
margin-left：-40px; / *将左边距设置为 - （RightColumnWidth）* /
background：yellowgreen;
}
#contentcolumn {
float：left;
宽度：75％; / *内容列的宽度* /
背景颜色：蓝色;
}
.innertube {
margin：0px; / *每列内部DIV的边距（以提供填充）* /
margin-top：0;
实际上，内部区域仅填充高度取决于内容...意味着2 divs 2行，但不是100％..
谢谢
在移动浏览器中，CSS position：fixed 无法正常工作。我的经验是在Android和iOS浏览器中，并没有任何一个能恰当地执行 position：fixed （iOS 5浏览器是例外，但它仍处于测试阶段）。
$ b
而不是在用户在移动浏览器中滚动时将元素固定到屏幕上并且不移动它，它倾向于被处理为像位置：绝对它在页面滚动时移动。
另外使用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 =页脚]'）的高度（））。
$（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屋！
