iPad 上的 100% 高度分割答案

【问题标题】：100% Height Div on iPadiPad 上的 100% 高度分割
【发布时间】：2013-04-25 22:42:57
【问题描述】：

我正在使用 Skeleton Grid 开发一个响应式网站，并且有一个左侧浮动导航栏 div，它是浏览器窗口的 100% 高度。它适用于我测试过的所有浏览器，除了 iPad 上的移动 safari。在移动 Safari 中，导航 div 是视口的 100%，但是当您在页面上向下滚动时，div 不会拉伸到内容的底部。 [见下图]。

如何使 div 在 iPad 上达到 100% 的高度，而不仅仅是视口的 100%？

开发网站： http://www.id8agency.com/jeremiah

问题截图：http://www.id8agency.com/jeremiah/jeremiah.png（你可以看到左边的白条在滚动后不会延伸到页面底部）

应该是什么样子： id8agency.com/jeremiah/jeremiah1.png （抱歉，我没有足够的声誉来发布超过 2 个链接） p>

我尝试过的事情：

将高度和最小高度设置为 110%（有效，但会在桌面网站）
将高度设置为内容的高度（有效，但并非所有页面都是长度相同，因此在某些内容所在的页面上创建滚动条更短）
设置位置：绝对和位置底部：0px（不起作用，将 div 定位在视口底部，而不是页面底部）
将元视口标签设置为 height=device-height 和 height=1000（中断网站的响应功能）

感谢您提供的任何帮助！

【问题讨论】：

标签： css mobile responsive-design viewport

【解决方案1】：

为什么不放在外部 div 上并将侧边栏的背景（切片以便可以在 y 轴上重复）应用到它并重复-y？它将扩展到内容端，当您不再需要它时，您可以从媒体查询中移除背景。

【讨论】：

如果我明白你在说什么，那就是我现在正在做的事情。当前有一个以白色为背景的 div 重复 1x1 图像。但在 iPad 上，div 不会滚动 100% 的页面内容，它只会滚动到视口的底部。如果我误解了您的建议，请告诉我。
不，我的意思是一个包含左右部分的外部 div，并且仅使用 repeat-y 重复背景，而不是重复。

【解决方案2】：

尝试将.navigation 元素设为position: fixed;，然后将右侧的内容放入其自己的包装器中（类似于.content-right）。

然后在.content-right 元素上设置这些属性，包括一个媒体查询“重置”，以便所有内容都进入一列（XXX 是断点）：

.content-right {
  margin-left: 240px;
}

@media screen (max-width: XXX){
  .content-right {
    margin-left: auto;
  }
}

【讨论】：

这是一个伟大而简单的解决方案。谢谢！

【解决方案3】：

当我将桌面浏览器视口设置为较小的高度时，也会出现此问题。我认为问题是，这里所有的 100% 高度都是相对于视口的，我认为您希望导航栏成为内容的高度，而不是视口。

但可能的解决方案是在#container-element 上设置一个假列（请参阅http://alistapart.com/article/fauxcolumns）。另一种可能性是使用 jquery 测量#container-element 的高度并将其分配给导航栏。比如：

var containerHeight = $('#container').height();
$('#navigation-container').css('height',containerHeight);

（我没有检查它是否有效，但我认为应该。）

【讨论】：