1

我有一个网页，我想在其中使用具有两个堆叠 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.onloadand中调用这个函数window.onresize。

4

1 回答 1

0

尝试这个：

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; }

请参阅演示。

希望它有所帮助。

于 2013-06-19T14:00:39.100 回答