通过调整对象大小来避免高度溢出

Avoid Height Overflow by resizing objects

本文关键字：高度 溢出 调整 对象      更新时间：2023-09-26

我正在尝试phonegap，以便使用HTML5和Java Script为手机开发一些多平台应用。

我想要一个对象，我有在我的网页(它的表或div)收缩到显示器的确切大小，因为每个手机可能有不同的显示，因此我使用java脚本和html像下面获得屏幕的大小(当然可用的大小)，并将其设置为我的div的高度和宽度，或任何我想要的对象。

它的工作直到宽度，但当它到高度，我仍然有一个滚动条。我不知道这是从哪里来的，但我尝试了很多方法来限制高度，甚至给父div一个确切的大小。

<style>
.dummy {
    width:100px;
    height:100px;
    background-color:#900;
}
</style>
<script>
var width = window.screen.availWidth + "px";
var height = window.screen.availHeight + "px";
function load() {
document.getElementById("dummy").style.height = height;
document.getElementById("dummy").style.width = width;
}
</script>
<style>
body {
    margin:0px;
    }
.cont {
    height:100px;}  
</style>
</head>

<body onload="load()">
<div class="cont">
<div class="dummy" id="dummy" onclick="load();"></div>
</div>
</body>
</html>

这段代码有什么问题?为什么我的红色div比屏幕高度还大?

谢谢。

好的，这在你的代码中没有错。你应该确切地知道window.screen.availWidth:是全高度设备+状态栏(对几个文档不正确，但这是事实)。您的屏幕可用的正是使用:

var width = window.innerWidth + "px";
var height = window.innerHeight + "px";
相关文章：