I've built a gallery layout. Each <div class="gallery"> section fills the viewport. Here's how it looks without a sticky header. The layout works as expected using this method.
body {
margin: 0;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
header,
footer {
padding: 48px;
color: #fff;
background-color: #000;
}
.gallery {
display: flex;
height: 100vh;
}
.gallery figure {
flex: 1;
margin: 0;
}
.gallery figure img {
display: block;
/* Make images responsive */
height: auto;
max-width: 100%;
/* Fill .gallery widdth and height */
width: 100%;
height: 100vh;
object-fit: cover;
}<header><span>Header</span></header><div class="gallery"><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure></div><div class="gallery"><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure></div><footer><span>Footer</span></footer>Next, I've added a sticky header, like so.
body {
margin: 0;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
header,
footer {
padding: 48px;
color: #fff;
background-color: #000;
}
header {
position: sticky;
top: 0;
}
.gallery {
display: flex;
height: calc(100vh - 120px);
}
.gallery figure {
flex: 1;
margin: 0;
}
.gallery figure img {
display: block;
/* Make images responsive */
height: auto;
max-width: 100%;
/* Fill .gallery widdth and height */
width: 100%;
height: 100vh;
object-fit: cover;
}<header><span>Header</span></header><div class="gallery"><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure></div><div class="gallery"><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure><figure><a href="#" class="lightbox"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat"></a></figure></div><footer><span>Footer</span></footer>To account for the sticky header, I've added height: calc(100vh - 120px); to .gallery. This works for the first .gallery parent, but something funky is happening with the last parent .gallery. As you can see, the footer overlaps.
Do I need to account for the height of the footer? How do I achieve this?