2

我在这个网站上工作了很长一段时间，但仍然遇到一些问题。这是布局：

  • 顶部导航栏：68px 高，全宽，固定在顶部。
  • 底部导航栏：42px 高，全宽，固定在底部。
  • 内容：各种宽度的全高图像，向左浮动。

导航内容仅通过水平滚动完成。图像填充从顶部导航栏底部到底部导航栏顶部的整个高度非常重要，并且不会以任何方式被裁剪或遮挡。同样重要的是，调整浏览器窗口大小或旋转移动设备不会破坏这种布局。我当前的代码在 Chrome 和 Safari 中运行良好（有一个警告），但在 Firefox 和 Opera 中却惨遭失败。我还没有在IE中测试过。这就是我正在做的事情：

#header {
  width: 100%;
  height: 68px;
}

#content {
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 42px;
  z-index: -10;
  width: auto;
  height: auto;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

#content #frame {
  max-width: 80000px; /* (To ensure that there's enough horizontal space for images) */
}

#content #frame img {
  height: 100%;
  width: auto;
  float: left;
  margin-right: 5px;
  position: relative;
  z-index: 100;
}

#footer {
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
}

所以我实际上在做的是在一个窗口中创建一个窗口，然后在该窗口中滚动，这就是导致我上面提到的 Safari 中的问题的原因。除此之外，这完全符合我在 Chrome 和 Safari 中想要的方式。在 Firefox 和 Opera 中，图像不会缩放到窗口的高度。

要亲自查看该站点，请访问此处： http: //peter-block.com/preface/。密码是“letitrain”。

我在想的最好是一起取消“窗口中的窗口”（简单并修复 Safari 问题），但我似乎找不到在所有浏览器中都能以我想要的方式工作的解决方案。任何帮助将不胜感激。

4

3 回答 3

1

很酷的设计！如果将#contenttop和设置bottom为0 会发生什么。然后，position: absolute#frame 并对其进行top: 68px;处理bottom: 42px;。这是正确的效果吗？

于 2013-04-24T19:06:50.103 回答
1

工作小提琴，根据新输入更新：http: //jsfiddle.net/XkrQg/5/

添加height: 100%;到#content #frame

#content #frame {
    height: 100%;
}

JS 部分：
将其添加到 loadImages() 的开头

var frameWidth = 0;

并将其添加到 loadImage()

    img.onload = function () {
        frameWidth += img.width + 5; //5 is for margin-right:5px; on img in css
        $('#frame').css('width', frameWidth);
    }

#frame该解决方案在加载图像时动态计算宽度。

添加此以在调整窗口大小时重新计算新宽度：

$(window).resize(function () {
    var frameNewWidth = 0;
    $('#frame img').each(function () {
        frameNewWidth += $(this).width() + 5;
    });
    $('#frame').css('width', frameNewWidth);
})
    .resize();

如果需要，您可以在图像加载期间隐藏垂直滚动条overflow-x:hidden;。

于 2013-04-24T19:07:19.087 回答
1 
#content #frame img {

    max-height: 100%;  // for IE

}
  • 我同意 Arbel，你必须拉伸 #content #frame 的高度，我宁愿为 #content #frame 添加一些 clearfix
于 2013-04-24T19:45:27.633 回答