2

我正在使用 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 个链接）

我尝试过的事情：

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

感谢您提供任何帮助！

4

3 回答 3

0

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

于 2013-05-01T21:27:37.150 回答
0

尝试让.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-01T21:50:14.003 回答
0

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

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

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

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

于 2013-05-01T22:19:38.677 回答