Question

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

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

仅通过水平滚动来完成内容导航。图像填充从顶部导航栏底部到底部导航栏顶部的整个高度非常重要，并且不会以任何方式裁剪或遮挡。调整浏览器窗口大小或旋转移动设备也不会破坏此布局也非常重要。我目前的代码在Chrome和Safari中完美运行（有一个caveat），但在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中的problem。除此之外，这完全符合我在Chrome和Safari中的需求。在Firefox和Opera中，图像不会缩放到窗口的高度。

要亲自查看网站，请转到此处：http://peter-block.com/preface/。密码是“letitrain”。

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

Answer 1

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

Answer 2

工作小提琴，根据新输入进行更新： 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;加载图像时隐藏垂直滚动条。

Answer 3

#content #frame img {

    max-height: 100%;  // for IE

}

我同意Arbel，你必须延长#content #frame的高度，我宁愿为#content #frame

CSS中的全高，可变宽度图像

3 个答案: