Height Responsive Horizontal Image Gallery, Fixed Header & Footer

Question

I'm trying to make a horizontal scroll gallery for a portfolio of photography on my website, but I want the images to be responsive to height (to fit varying screen sizes). To try and do this I have used the unit: vh and this is causing me problems.
I have a position:fixed header and footer so they always stay on the screen while you scroll through the gallery. With the CCS I have used this means as the screen gets smaller, the images go underneath the header & footer rather than constantly staying inbetween them.

I have seen a website with an ideal horizontal gallery very similar to what I am trying to achieve. You can check out the website here . On the linked website the images always seem to stay equidistant from the header and footer.
When inspecting the element it looks like they're using tables, which I understood to be a big no, no. Is this how they are achieving this effect on the gallery?

I've linked a JS Fiddle to a very basic version of my design so you can see what I've done so far.

JS Fiddle: https://jsfiddle.net/pmh9zvta/1/

Basically, in a sentence I'm asking how I can achieve the same effect as the example website in the link.

Answer 1

Robin,

Hmm...so vh can actually achieve a pretty similar effect. Your example images are rather extreme, though (1500x100).

Check out this fiddle I made (using your code as a base): 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);
}

Main changes

• Added a wrapper around your content for better management (within JSFiddle and out).

• Changed your footer to be positioned absolutely, along with a host of other changes that allow it to stick to the bottom until your Viewport is too short. Then it gets pushed down like a normal footer. This keeps your content from going behind the footer.

• Made the "gallery-wrapper" with "overflow-x:scroll". I'm personally not a fan of side-scrolling galleries, but if your heart is set on it, this will keep the side-scrolling contained to this block, and no your entire website (in turn obviating the need for a "fixed" footer).

• Chose some more realistic image dimensions to work with, and a shorter vh (70).

Regarding your example, as best as I can tell, they're using Javascript to rewrite the height of the "scrollHolder" container DIV. So their solution is not CSS-only, instead using JS to read the height of the browser and adjust the height accordingly.

I'd also say their approach is flawed, as it doesn't scale properly to browser width. On a thinner screen, you can only see zoomed-in pieces of each image.

So, in addition to the above changes, I'd recommend:

• Setting media-queries at an appropriate browser width (say 760) so that your images become scaled by browser width, not height (so vw, not vh).

• This might require some special "min-height" settings in order to keep your tall images from becoming toooo tall, and short images from becoming little munchkins.