div size relative to screen size
Question
I'm programming a html5 app with JQuery Mobile and Phonegap. I want to run them on many different devices. Because of that, I want to have everything relative to screen size.
<div id="pos" data-role="content"
style="border: 5px solid silver; margin-left: auto; margin-right: auto; width: 250px; height: 250px;">
I use this div Element to display a google map inside with a little border around.
How can I adjust the size for example 80% of the screen size?
I tried it with width: 90%; height: 90%, but the result is really bad. Its not relative to screen, it lokks like relative to the content.
And the size of the border is fixed with 5px, is it possible to insert here a nice argument to have it relative to screen size?
I hope someone can help!
Thanks!
3 answers
solution1
0 2012-07-20 07:42:48
A html element, set to width: 100% , stretches to a 100% of it's parents width. You need to make sure that the containing elements widths are also 100% .
You also need to make the html and body width 100% .
An example:
html, body { width: 100%; }
#pos { width: 80%; }
This example assumes the #pos element is straight on the body.
solution2
0 2012-07-20 07:57:37
您可能需要定义父母的身高和宽度，如果您不想在这里使用js，我在jsfiddle上做了一个示例jsfiddle
solution3
0 2012-07-20 09:23:32
looks good, so I think the problem is because of JQuery! Here is my complete code of this page:
<!DOCTYPE html>
<html>
<head>
<title> App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<style>
html, body, geolocation { width: 100%; height: 100%; }
#pos { width: 80%; height: 80%; }
</style>
</head>
<body>
<div data-role="page" id="geolocation" data-theme="a">
<h2 align="center">Geolocation</h2>
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Car Data</h1>
</div>
<div id="pos" data-role="content" style="border: 5px solid silver;">
Deine Position wird ermittelt...</div>
<script type="text/javascript" src="geolocation.js"></script>
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li><a href="home.html" data-icon="home">Connect</a></li>
<li><a href="carView.html" data-icon="gear">Vehicles</a></li>
<li><a href="infoView.html" data-icon="info">Info</a></li>
</ul>
</div>
</div>
<script>
$('#geolocation').on('swipeleft',function(){
$.mobile.changePage("fuelGauge.html", { transition: "slide"});
console.log('slideLeft');
})
$('#geolocation').on('swiperight',function(){
$.mobile.changePage("batteryStatus.html", { transition: "slide", reverse: 'true'});
console.log('slideLeft');
})
</script>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.