CSS 使用 jQuery Mobile 的所有可用空间的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9485568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Content using all available space with jQuery Mobile
提问by SERPRO
I have a project with jQuery Mobile + phonegap and I have some issues with the footer and content div.
我有一个使用 jQuery Mobile + phonegap 的项目，但页脚和内容 div 有一些问题。
A basic jQuery Mobile page looks like this:
一个基本的 jQuery Mobile 页面如下所示：
<div data-role="page" data-theme="b" id="map">
<div data-role="header" data-theme="b" data-position="inline">
<a href="#" data-rel="back" data-icon="arrow-l">Back</a>
<h1>MAP</h1>
</div><!-- /header -->
<div data-role="content" id="map_canvas">
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<h4>TEST</h4>
</div><!-- /footer -->
</div><!-- /page -->
Now I'm trying to load google maps in the content so I use this in JavaScript:
现在我正在尝试在内容中加载谷歌地图，所以我在 JavaScript 中使用它：
$('div').live("pageshow", function()
{
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
And this is the result:
这是结果：
The problem is that the footer doesn't stick to the bottom unless you specify the attribute data-position="fixed"like this:
问题是页脚不会粘在底部，除非您指定这样的属性data-position="fixed"：
<div data-role="footer" data-theme="d" data-position="fixed">
<h4>TEST</h4>
</div><!-- /footer -->
That's fine but the problem is the map is loading before jquery mobile take the footer to the bottom, as a result I have this page:
这很好，但问题是地图在 jquery mobile 将页脚带到底部之前加载，因此我有这个页面：
Where you can see the map only using the space left before it's moved to the bottom.
您只能使用移动到底部之前留下的空间来查看地图。
My question is.. what event should I wait for or what do I need to add to my code in order to load the map so it will use all the space between header and footer?
我的问题是.. 我应该等待什么事件，或者我需要在代码中添加什么才能加载地图，以便它使用页眉和页脚之间的所有空间？
回答by Jasper
You don't need to wait for an event, you need to set the .ui-contentelement's height to something around 100%.
你不需要等待一个事件，你需要将.ui-content元素的高度设置为大约100%。
Here is a purely CSS method of achieving 100%height for a jQuery Mobile pseudo-page:
这是实现100%jQuery Mobile 伪页面高度的纯 CSS 方法：
/*make sure the viewport is 100% height*/
html, body {
height : 100%;
}
/*make the page element 100% height*/
#map-page {
height : 100%;
}
/*specify a height for the header so we can line-up the elements, the default is 40px*/
#map-page .ui-header {
height : 40px;
}
/*set the content to be full-width and height except it doesn't overlap the header or footer*/
#map-page .ui-content {
position : absolute;
top : 40px;
right : 0;
bottom : 30px;
left : 0;
}
/*absolutely position the footer to the bottom of the page*/
#map-page .ui-footer {
position : absolute;
bottom : 0;
left : 0;
width : 100%;
height : 30px;
}?
Here is a demo: http://jsfiddle.net/jasper/J9uf5/2/
这是一个演示：http: //jsfiddle.net/jasper/J9uf5/2/
回答by sherif
This one also works:
这个也有效：
<html>
<head>
<meta name="viewport" id="viewport"
content="width=device-width, height=device-height,
initial-scale=1.0, maximum-scale=1.0,
user-scalable=no;" />
</head>
<body>
....
<div data-role="header" data-position="fixed">
....
<div data-role="footer" data-position="fixed">
....
</body>
</html>
回答by Omer Yair
Just add this css:
只需添加这个css：
<style>
#map{
height: 0;
}
#map_canvas {
height: 100%;
padding: 0;
text-shadow: none;
}
</style>
