Set Height 100% on Absolute Div

Set height 100% on absolute div

http://jsbin.com/ubalax/1/edit .You can see the results here

body {
    position: relative;
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    background-color: yellow;
}

Why i can't make absolute div height 100%

The parent div .fixed is absolutely positioned and has a height 50px. So applying height: 100%on it's child will inherit the relative height(i.e 50px).

Use height: 100vh; on .absolute. I have used calculated height height: calc(100vh - 51px) to avoid scrollbar due to top: 51px.

Note: vh is 1/100th of the height of the viewport(visible webpage height).

Updated Fiddle

.absolute {
  position: absolute;
  height: calc(100vh - 51px);
  width: 100%;
  background-color: green;
  top: 51px;
  left: 0px;
}

CSS position absolute and height 100% issue on Chrome

Looks like Chrome doesn't apply the height:100% when position:absolute and display:table is also being set at the same time, and of course there is also position:relative set on the wrapper.

I would suggest to use flexbox for the caption for easy centering, and use the HTML5 semantic <figure> + <figcaption> elements for the markup.

.caption {
  ...
  display: flex;
  justify-content: center;
  align-items: center;
}

Follow this post to find more ways of centering for both horizontally and vertically.

Snippet

.figure {  position: relative;  display: inline-block;  /*NEW*/  margin: 0;              /*NEW*/}
.image {  border-radius: 4px;  width: 100%;  height: auto;  display: block;}
.caption {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.6);  color: white;  box-sizing: border-box;  border-radius: 4px;  opacity: 0;  transition: 0.2s;  display: flex;            /*NEW*/  justify-content: center;  /*NEW*/  align-items: center;      /*NEW*/}
a:hover .caption {  opacity: 1;}

<a class="item" href="#">  <figure class="figure">    <img class="image" src="//i.stack.imgur.com/tiQ1S.jpg">    <figcaption class="caption">      caption of the image    </figcaption>  </figure></a>