Mysteriously Height 100% not working

Question

there are six images, which should be displayed in two lines (Although in reality they are twelve because i use an hover effect). The problem is that the images are not displayed on two lines. Just look good if I put a fixed height. For example 500px. But that creates a problem with the Responsive.

I have tried thousand formulas. Display: block, inline, auto, etc .. But nothing seems to give good results.

Here I leave the simplified code, if someone expert can tell me what that is failing. Thank you!

CSS

<style type="text/css">

html,body {height:100%;

}
.image-grid {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.image-grid .image {

        width: 33%;
        padding-left:6px;
        padding-left:6px;
 }


.image-grid .image img {
            width: 100%;
 }

#cf {
  position:relative;
  width:33%;
  display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}

#cf img {

 position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
 }

#cf img.top:hover {
opacity:0;
height:350px;
}
</style>

HTML

<body>

<section class="image-grid">

                                         <a id="cf" href="#"  class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/1_weddings.jpg" /></a>

                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="" /></a>

                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top"src="wp-content/uploads/2015/12/3_corporative.jpg" alt="" /></a>

                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/4_documentals.jpg" alt="" /></a>

                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/5_originals.jpg" alt="" /></a>

                    <a id="cf" href="#" class="image">
                    <img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
                    <img class="top" src="wp-content/uploads/2015/12/6_freelancers.jpg" alt="" /></a>

</section>

why do you make _.image-grid .image_ width: 33% and next _.image-grid .image_ make it 100%? — Ken Bekov, Dec 28 '15 at 05:05
Since you're using percentage heights, you need to specify a height for all parent elements. You gave `html` and `body` a `height: 100%`. But what about the height of `.image-grid`? That's also a parent container and needs an explicit height. For more details see this post: http://stackoverflow.com/a/31728799/3597276 — Michael Benjamin, Dec 28 '15 at 05:14

score 0 · Answer 1 · answered Dec 28 '15 at 06:30

If you want to do a 2 row by 3 image layout with variable height images using display:flex, create two flexbox containers with 3 children inside each of them. (Check the demo on Codepen to see this layout working).

HTML:

<section class="flex-container">
  <div class="flex-child"></div>
  <div class="flex-child"></div>
  <div class="flex-child"></div>
</section>
<section class="flex-container">
  <div class="flex-child"></div>
  <div class="flex-child"></div>
  <div class="flex-child"></div>
</section>

Style the container as a flexbox, define the flex-flow into rows that don't wrap and use justify-content to center the imagery.

.flex-container {
  // Sets display as flexbox
  display: flex;

  // flex-flow is a CSS shorthand for how flexboxes should flow
  // In this case, boxes will flow in a row and not wrap to second line
  // This is default behavior so you dont have to write this out
  flex-flow: row nowrap;

  // justify-content will space flexboxes for you; centered in this case
  justify-content: center;
}

.flex-child {
  padding: 20px;

  img {
    width: 200px;
  }
}

It's not 100% clear to me what you are trying to do with this layout so my demo is pretty simple. Flexbox is hugely powerful and can do way more than what you've asked for in this example - read CSS-Tricks if you want to learn more.

score 0 · Answer 2 · answered Dec 28 '15 at 08:13

You need to set height of parent ie html page and body Then try using height in percentage for images Incase you are setting all images of same height it would be better to use a common class and set it height. Add following to your css

html,body{
height:100%;
}

Mysteriously Height 100% not working

2 Answers2