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。

希望它有所帮助。

在移动浏览中使用全高度和缩进地址栏

1 个答案: