1

I am using Zurb foundation in my project and on one side I only have a top-bar and an image gallery. I need to make somehow the image gallery to take up the whole space on the page that is left below the top bar. And I need to fill up that space with images and then resize them according to the screen size. The gallery section should not be bigger or smaller than the rest of the space on the page. The scrolling should be disabled, so the height of the gallery should always be the amount of space from the top bar to the bottom of the page. And as I wrote before filled with the images that have the same spacing around them, and those images should resize according to the screen. I am not sure how can I achieve that, I have tried with default foundation classes like column-block, but then when I resize the screens, there is space below images. This is the html:

<div class="content">
  <div class="top-bar">
    ...top bar content
    </div>
  </div>


<div class="gallery">
  <div class="small-up-3 medium-up-8 large-up-12">
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
  </div>
</div>
Leff
  • 1,968
  • 24
  • 97
  • 201
  • not sure about foundation, but you can use a combination of flexbox and VH. Could start here: http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1 – Millard May 19 '17 at 12:06
  • While tweaking your html, I could do this https://jsbin.com/qegukomoze/edit?html,css,output but I don't think this is right for a real project. A pixel design of what you're trying to accomplish would be helpful. – Pierre Burton May 19 '17 at 12:21

0 Answers0