iPad上的100％高度分区

Question

我正在使用Skeleton Grid处理一个响应式网站，并且左侧浮动的导航栏div是浏览器窗口的100％高度。它适用于我测试的所有浏览器，除了iPad上的移动游猎。在移动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个链接）

我尝试过的事情：

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

感谢您提供任何帮助！

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

但可能的解决方案是在＃container-element上设置一个虚拟列（参见http://alistapart.com/article/fauxcolumns）。 另一种可能性是使用jquery测量＃container-element的高度并将其分配给导航栏。类似的东西：

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

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