[英]div size relative to screen size
我與編程jQuery Mobile的和PhoneGap的一個HTML5應用。 我想在許多不同的設備上運行它們。 因此,我想擁有與屏幕尺寸相關的所有內容。
<div id="pos" data-role="content"
style="border: 5px solid silver; margin-left: auto; margin-right: auto; width: 250px; height: 250px;">
我用這個div元素顯示谷歌地圖里面大約有少許邊界。
如何調整尺寸,例如屏幕尺寸的80%?
我嘗試了寬度:90%; 身高:90%,但結果確實很糟糕。 它不是相對於屏幕,而是相對於內容。
邊框的大小固定為5px,是否可以在此處插入一個漂亮的參數使其相對於屏幕大小?
我希望有人能幫幫忙!
謝謝!
設置為width: 100%
的html元素,拉伸到其父元素width: 100%
的100%
。 您需要確保包含元素的寬度也是100%
。
您還需要使html
和body
寬度為100%
。
一個例子:
html, body { width: 100%; }
#pos { width: 80%; }
本示例假定#pos元素在主體上是筆直的。
您可能需要定義父母的身高和寬度,如果您不想在這里使用js,我在jsfiddle上做了一個示例jsfiddle
看起來不錯,所以我認為問題是因為JQuery! 這是此頁面的完整代碼:
<!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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.