CODEWITHSUNDEEP
cssflexbox
Matt
Matt

Reputation: 23789

CSS flexbox: variable height footer beneath variable height content area

I need to make a simple layout where the top area is a variable-sized image and the bottom area should be a variable-height footer, where the content of the footer is

My best attempt so far:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;
  min-height: 100%;
}

.body {
  display: flex;
  min-height: 100%;
}

nav {
  width: 150px;
  flex-shrink: 0;
  background-color: gray;
}

main {
  flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.image {
  flex-grow: 1;
  border: 1px solid blue;
  
  background-image: url('https://www.hawaiimagazine.com/sites/default/files/field/image/plumeria%202%20Eric%20Tessmer%20Flickr.jpg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top center;
}

footer {
  border: 1px solid red;
}
<div class="body">
  <nav>side nav</nav>
  <main>
    <div class="image"></div>
    <footer>
      I need this to stay directly below the image but not go beneath the fold
    </footer>
  </main>
</div>

(Resize the preview window both horizontally and vertically, and you'll see that even when the image does not fill the height, the footer does not raise to fill it, either.)

I've tried many different ways, including without flexbox, with grid, and with an <img> tag -- and any of those would be fine in the end. (Just no JS...) I almost had success with an <img> tag and using object-fit: contain but it would push the footer beneath the fold.

EDIT: Updated attempt here (still not solved though):

* { padding: 0; margin: 0; }

html, body {
  height: 100%;
  min-height: 100%;
}

.body {
  display: flex;
  min-height: 100%;
}

nav {
  width: 150px;
  flex-shrink: 0;
  background-color: gray;
}

main {
  flex-grow: 1;
	display: flex;
	flex-direction: column;
}

img {
  max-width: 100%;
	max-height: 80vh;
  object-fit: contain;
}

footer {
  height: 20vh;
  border: 1px solid red;
}
<div class="body">
  <nav>side nav</nav>
  <main>
    <img src="https://www.hawaiimagazine.com/sites/default/files/field/image/plumeria%202%20Eric%20Tessmer%20Flickr.jpg">
    <footer>
      I need this to stay directly below the image but not go beneath the fold.<br>
      UPDATED ATTEMPT: This footer is now fixed-height. If possible I'd like to avoid this.
    </footer>
  </main>
</div>

(this example shows the footer staying below the content, but now the footer is fixed-height, which is not desirable)

How can we use pure CSS to cause the content of the footer to stay below the image, while not extending beneath the fold when the image is tall?

(EDIT: And I should clarify, I did set the sizing to contain on purpose; I need to see the full image -- it's for a photo gallery. So cropping is not really an option here.)

Upvotes: 3

Views: 279

Answers (2)

Matt
Matt

Reputation: 23789

Thanks @henryfhchan on Twitter for the solution! https://codepen.io/anon/pen/oJpvMZ

<div>
    <img src="...">
    <footer>caption is variable-size!</footer>
</div>

div {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

img {
  display: block;
  max-width: 100%;
  object-fit: contain;
  flex: 0 1 auto;
  min-height: 0;  /* necessary */
}

footer {
  padding: 10px;
  flex: auto
}

Upvotes: 1

DerDjamel
DerDjamel

Reputation: 114

change the background-size: contain to background-size: cover

it worked for me

Upvotes: 1

Related Questions