javascript - 在带有缩回地址栏的移动浏览器中使用全高

Question

我有一个网页，我想在其中使用带有两个堆叠 div 的屏幕的完整高度(不多也不少)，以便第二个 div 填充第一个 div 之后剩余的高度。

目前我是这样做的:

CSS

body { height: 100%; }

JavaScript

window.onload=function(){
    document.getElementById('div2').style.height =
        (document.getElementById('body').offsetHeight -
            document.getElementById('div1').offsetHeight) + 'px';
}

这工作正常，但在移动浏览器中(在 Android 默认浏览器和 Chrome 上测试)地址栏仍然可见，尽管它可以隐藏并且空间用于第二个 div。我假设 iPhone 也有类似的行为。

所以我的问题是:有谁知道如何在移动浏览器中获取可用高度，包括可伸缩的地址栏？

编辑

我找到了这个:http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ ，但我无法让它在 Chrome 中运行。

更新

我现在正在使用这段代码，但它仍然无法在 Android Chrome 中运行(我还没有在 iPhone 上尝试过)。

JavaScript 函数:

if(typeof window.orientation !== 'undefined') {
    document.body.style.height = (window.outerHeight) + 'px';
    setTimeout( function(){ window.scrollTo(0, 50); }, 50);
}
document.getElementById('div2').style.height =
    (document.body.offsetHeight - 
        document.getElementById('div2').offsetHeight) + 'px';

我在 window.onload 和 window.onresize 中调用这个函数。

Answer 1

试试这个:

HTML

<div class="box">
   <div class="div1">1st</div>
   <div class="div2">2nd</div>
   <div class="clear"></div>
</div>

CSS

html, body { height: 100%; }
div.box { background: #EEE; height: 100%; width: 600px; }
div.div1{background: #999; height: 20%;}
div.div2{ background: #666; height: 100%; }
div.clear { clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px; }

参见 demo .

希望对您有所帮助。