Question

这对许多人来说可能不是一个问题，但是我花了很长时间才找到解决方案，一旦我知道如何解决这个问题，这个解决方案就不可避免地显而易见了。因此，为了帮助同一条船上的其他人，我将要求并回答这个问题。

基本上我有几个不同高度的html页面，如果需要滚动或者屏幕上显示的是页面上可用的内容，则并不总是很明显。

所以，如果不需要滚动，我会在屏幕底部引入绿线作为页脚，但如果需要滚动则会位于文本的底部。换句话说，如果要求用户滚动，则绿色线将不会出现在屏幕的可见部分上。

我无法相信这项任务证明是多么困难。

最初我只是在文字的底部有一条绿线：

<div id="footer" style="width: 320px; height: 5px; background:#fff url(./images/body_bg.gif) repeat-x;"></div>

但这有时意味着对于带有一行或两行文本的页面，页脚几乎位于屏幕顶部。这是不可接受的，所以我介绍了

style="position:absolute;
        width:100%;
        height:100%;
        min-height:100%; "

到容器div和

<div id="footer" style="width: 320px; height: 5px; background:#fff url(./images/body_bg.gif) repeat-x; position:relative; bottom:0;"></div>

添加职位：亲属;底部：0;到页脚，这使得页脚位于屏幕的底部。

下一个问题 - 最难以克服的问题 - 是如果内容超过屏幕的高度，则会将页脚放在所有文本的下方。直到此时，即使下面有更多内容，页脚也会出现在屏幕的底部。这意味着用户再也不知道是否有更多内容需要阅读。

因此，为了解决这个问题，我使用了一些在加载页面时调用的javascript

function getDocHeight(){
            var documentBody = document.getElementById('wrapper').offsetHeight;
            var windowHeight = window.innerHeight;

            if(documentBody<windowHeight){
                document.getElementById('footer').style.position="absolute";
                document.getElementById('footer').style.bottom="0";
            }
        }

如果窗口高度大于包装容器，则将窗口高度与包装容器的高度进行比较，然后使页脚位于屏幕底部。否则，让它位于最后一行文本下方。

关键是引入一个包装器div，其唯一目的是知道if条件可能的高度。

使用javascript的Android webview使页脚位于屏幕的底部

0 个答案: