Height 100% does not work

Question

Height 100% does not work

Navigation

#1 by (3 votes)
#2 by (2 votes)

6

I'm trying to create a menu made with images with the hover effect, but I do not understand why you do not see the div complete.

The menu consists of 6 images (which in reality are twelve, two per menu option, for the hover) and must be seen in two 'lines'. However, I do not know why they overlap in a single 'line' and they end up seeing only three.

I leave the simplified code in case someone who understands sees where the fault is:

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;
}

.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;
}

<section class="image-grid">
  <a id="cf" href="#" class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/people" />
  </a>

  <a id="cf" href="#" class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/nature" alt="" />
  </a>

  <a id="cf" href="#" class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/city" alt="" />
  </a>

  <a id="cf" href="#" class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/sports" alt="" />
  </a>

  <a id="cf" href="#" class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/cats" alt="" />
  </a>

  <a id="cf" href="#" class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/abstract" alt="" />
  </a>
</section>

html5 html css3 css

asked by freenetica 28.12.2015 в 05:45

source

2 answers

Problem when defining time zone using tzinfo on datetime using pytz.timezone () Replace words with span in contenteditable

score 3 · Answer 1

Is it likely that the images have that maximum size? However, instead of using the size relative to the padre tag using relative proportions ie % if the images are going to be the full size of the window as such, you can use ViewPort height/width , this gives you the possibility of have the size relativo to the window instead that is relative to the parent.

I do not know what the div is talking about, (I do not see it in the code) but if it's the section then try this:

100vh is equivalent to 100% of the height of THE WINDOW
  100vw is equivalent to 100% of the width of THE WINDOW
  This is regardless of the size of the parent tag.

[componente]{
  height: 100vh; 
 /* resto del código . . . */
}

score 2 · Answer 2

Dear, it would be better to expose more information about the final result that you require, but from what I understood you wanted to get to this:

.image-grid{
  height:auto;
  width:500px;
  position:relative;  
  display: flex;
  -webkit-flex-direction:column;
  -webkit-flex-flow:wrap;
}

.image-grid .image {
  width:50%;
  height:300px;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
}

.image-grid .image img {
  width: 100%;
  height:100%;
  top:0;
  left:0;
  position:absolute;
  -webkit-transition:opacity .3s ease-in;
}

.image-grid .image:hover .top{
  opacity:0;
}

<section class="image-grid">
  <div class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/people" />
  </div>

  <div class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/people" alt="" />
  </div>

  <div class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/city" alt="" />
  </div>

  <div class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/sports" alt="" />
  </div>

  <div class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/cats" alt="" />
  </div>

  <div class="image">
    <img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
    <img class="top" src="http://lorempixel.com/200/200/abstract" alt="" />
  </div>
</section>

* You have some problems writing your code, since you mention divs, but you actually use other tags. You also have multiple IDs in your calls.

I hope I have answered your questions