很多话题在这个…但没有得到点如何做到这一点。
我有我的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);
});
要获得完美的完成，您需要考虑目标设备地址栏的行为，因为如果您想要一个全屏网页，那么您必须将地址栏的高度添加到页面的高度。
