dot*_*huZ 18 height header footer jquery-mobile
关于这一点的很多主题......但没有说明如何做到这一点.
我有我的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分2行,但不是100%..
谢谢
Jas*_*per 10
CSS position: fixed在移动浏览器中无法正常运行.我的经验是使用Android和iOS浏览器,并且没有一个position: fixed正确的说法(iOS 5浏览器除外,但它仍处于测试阶段).
当用户在移动浏览器中滚动时,不是将元素固定到屏幕而不是移动它,而是倾向于被视为position: absolute并且当页面滚动时它会移动.
同样使用CSS overflow属性将不允许在大多数移动设备上滚动(iOS支持它,但用户必须知道在滚动div中滚动时使用两个手指).
但是,您可以使用CSS,但要注意您需要使用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);
});
要获得完美无瑕的结束,您需要考虑目标设备地址栏的行为,因为如果您想要一个全屏网页,则必须将地址栏的高度添加到页面的高度.