高度响应的水平图像库，固定页眉和页脚

Question

我正在尝试为网站上的摄影作品制作水平滚动画廊，但我希望图像能够响应高度（以适应不同的屏幕尺寸）。 要尝试执行此操作，我使用了单位： vh ，这给我带来了问题。
我有一个position:fixed页眉和页脚，因此当您滚动浏览画廊时，它们始终停留在屏幕上。 使用CCS时，随着屏幕变小，图像进入页眉和页脚下方，而不是一直停留在它们之间。

我见过一个理想的水平画廊网站，该网站与我想要达到的水平非常相似。 您可以在此处查看该网站。 在链接的网站上，图像始终看起来与页眉和页脚等距。
在检查元素时，看起来好像他们正在使用表格，据我所知，这是一个很大的问题。 这是他们如何在画廊上实现这种效果吗？

我已经将JS小提琴链接到我的设计的非常基本的版本，因此您可以看到到目前为止我所做的事情。

JS小提琴： https ： //jsfiddle.net/pmh9zvta/1/

基本上，我想用一句话问我如何实现与链接中的示例网站相同的效果。

Answer 1

罗宾

嗯...所以vh实际上可以达到类似的效果。 不过，您的示例图片非常极端（1500x100）。

看看我制作的这个小提琴（使用您的代码作为基础）： https : //jsfiddle.net/Benihana77/5xw21tvc/

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 100px;
  min-height: 100%;
}

#header {
  width: 100%;
  padding: 10px;
  margin-right: auto;
  margin-left: auto;
  position: fixed;
  background-color: #fff;
  background: rgb(255, 255, 255);
  /* Fall-back for browsers that don't support rgba */
  background: rgba(255, 255, 255, 0.92);
  text-align: center;
  z-index: 1;
}

#gallery-wrapper {
  position: relative;
  padding-top: 60px;
  overflow-x: scroll;
}

#gallery-wrapper img {
  height: 70vh;
  width: auto;
}

#footer {
  font-family: Corda-Light;
  font-size: 14px;
  color: #333;
  width: 100%;
  padding: 5px;
  padding-top: 13px;
  padding-bottom: 8px;
  padding-left: auto;
  padding-right: auto;
  position: absolute;
  bottom: 0;
  background-color: #efefef;
  text-align: center;
  background-color: #fff;
  background: rgb(255, 255, 255);
  /* Fall-back for browsers that don't support rgba */
  background: rgba(255, 255, 255, 0.9);
  z-index: 1;
}


/* Navigation Bar Styling */

.nav {
  border-bottom: 1px solid #ccc;
  border-width: 1px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
}

.nav li {
  display: inline;
}

.nav a {
  display: inline-block;
  padding: 10px;
}


/* Horizontal Gallery Styling */

ul.gallery-row {
  white-space: nowrap;
}

ul.gallery-row li {
  list-style: none;
  display: inline;
}


/* Footer Styling */

.footer {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.footer img:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
}

主要变化

• 在您的内容周围添加了一个包装器，以实现更好的管理（在JSFiddle内外）。

• 将页脚更改为绝对位置，同时进行了许多其他更改，使其始终停留在底部，直到视口太短为止。 然后像普通页脚一样被推下。 这样可以防止内容落后页脚。

• 用“ overflow-x：scroll”制作“ gallery-wrapper”。 我个人不喜欢侧滚式画廊，但是如果您心动的话，这将使侧滚式包含在该模块中，而不会占用整个网站（从而避免了“固定”的需求）页脚）。

• 选择一些更逼真的图像尺寸并使用较短的vh（70）。

关于您的示例，据我所知，他们正在使用Javascript重写“ scrollHolder”容器DIV的高度。 因此，他们的解决方案不仅限于CSS，而是使用JS读取浏览器的高度并相应地调整高度。

我还要说，他们的方法有缺陷，因为它无法正确缩放到浏览器宽度。 在较薄的屏幕上，您只能看到每个图像的放大部分。

因此，除了上述更改之外，我还建议：

• 将媒体查询设置为适当的浏览器宽度（例如760），以使图像按浏览器宽度而不是高度（即vw，而不是vh）缩放。

• 这可能需要一些特殊的“最小高度”设置，以防止高个子图像变得太高，而使短个子图像变得很小。