相关疑难解决方法(0)

我们看到iOS 7中Safari的高度为100%的Web应用程序存在问题.似乎window.innerHeight(672px)与window.outerHeight(692px)不匹配,但仅在横向模式下.最终发生的事情是,在身体高度为100%的应用程序中,您可以获得20px的额外空间.这意味着当用户在我们的应用上滑动时,导航元素会被拉到浏览器镶边后面.这也意味着位于屏幕底部的任何绝对定位的元素最终都会关闭20px.

这个问题也在这里提出了这个问题: IOS 7 - css - html height - 100%= 692px

在这个模棱两可的截图中可以看到:

我们要做的就是解决这个问题,以便在Apple修复bug之前,我们不必担心它.

这样做的一种方法是绝对仅在iOS 7中定位主体,但这几乎将额外的20px放在页面的顶部而不是底部:

body {
    position: absolute;
    bottom: 0;
    height: 672px !important;
}

任何帮助强迫outerHeight匹配innerHeight,或者黑客攻击以便我们的用户看不到这个问题的任何帮助都将非常感激.

我将如何设计一个具有固定高度页眉和页脚(连接到浏览器窗口的顶部和底部)但扩展中间的网站.滚动条仅适用于中间(图中的橙色部分),因此页面的其余部分永远不需要滚动.我在下面画了一个模型来更清楚地解释.

理想情况下,它需要完全用CSS和HTML实现(没有javascript小提琴!).我已经对这个问题做了很多但是我不能强制橙色部分填满剩余空间(如果它没有满足)并且如果它溢出则开始滚动.

我的页面顶部有标题,左侧是侧边栏,右侧是主要内容区域.可以在http://jsbin.com/iqibew/3上看到简化版本.

侧边栏具有样式,position: fixed因此它不会与页面的其余部分一起滚动.这有效,但如果内容太长而无法适应,我还需要侧边栏本身滚动.

只有在我可以为侧边栏设置正确的高度时才可以这样做.但我找不到任何方法来设定这个高度.100%接近,但它太高了,因为侧边栏从标题下面开始.

没有办法解决这个问题.我对CSS或JavaScript/jQuery解决方案持开放态度.