iPad上的100％高度分区

我正在使用骨架网格的响应式网站上工作，并具有100％浏览器窗口高度的左侧浮动导航栏div。它适用于我测试过的所有浏览器，除了iPad上的移动Safari浏览器。在移动Safari浏览器中，导航div是视口的100％，但是当您向下滚动页面时，div不会伸展到内容的底部。 [见下图]。iPad上的100％高度分区

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

开发网站：http://www.id8agency.com/jeremiah/jeremiah.png（因为你可以看到左边的白条一旦滚动不伸展到页面底部）

：问题的 http://www.id8agency.com/jeremiah

截图

它应该如何看： id8agency.com/jeremiah/jeremiah1.png （对不起，我没有足够的声望发布超过2个链接）

事情我已经尝试：

设定的高度和最小高度，以110％（的作品，但在创建的桌面网站的滚动条）

集高度的内容高度（工作，但不是所有的页面将是相同的长度，所以在创建一些网页，其中的内容是短的滚动条）

设置位置：绝对和位置底部：0像素（不工作，位置DIV在t的底部他视口，而不是页面的底部）

设置中继检视区标记身高=设备高度和高度= 1000（休息网站的响应功能）

感谢您的帮助，您可以提供！

来源

2013-05-01 bill

尝试将.navigation元素设置为position: fixed;，然后将内容置于其自己的包装中（如.content-right）。

然后设置.content-right元素这些属性包括媒体查询“复位”时，一切都将一列（XXX是断点）：

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

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

来源

2013-05-01 21:50:14 jordanandree

这是一个很棒的简单解决方案。谢谢！ – bill 2013-05-02 13:22:10

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

来源

2013-05-01 21:27:37 drip

如果我理解你说的话，那就是我现在正在做什么。目前有一个div以白色作为重复1x1图像的背景。但在iPad上，div不会滚动页面内容的完整100％，它只会到视口的底部。如果我误解了你的建议，请告诉我。 – bill 2013-05-01 21:37:55

不，我的意思是一个外部的div，左侧和右侧部分，重复背景只有机智repeat-y，不重复。 – drip 2013-05-02 04:38:42

的问题也出现，当我把我的桌面浏览器视口到一个小高度。我认为问题在于，这里的所有100％高度都与视口相关，我认为您希望导航栏成为内容的高度，而不是视口。

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

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

（如果它的作品我没有检查，但我认为它应该。）

来源

2013-05-01 22:19:38 johnnydoe82

iPad上的100％高度分区

回答

相关问题