Pleine hauteur de div avec position relative

Question

Comment attribuer la pleine hauteur à un div avec une position relative ?

div {
  border: 1px solid;
  box-sizing: border-box;
}
.home-gallery {
  position: relative;
  height: 100%;
  width: 100%;
}
.rc-contain {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}
.rc-slider {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

<div class="home-gallery">
  <div class="rc-contain">
    ....
  </div>
  <div class="rc-slider">
    ....
  </div>
</div>

mais mon div home-gallery ne prend pas toute la hauteur. Comment puis-je attribuer une hauteur dynamique à la galerie d'accueil, étant donné que je me concentre sur le responsive design.

Answer 1

Ajoutez simplement la ligne suivante au css

html, body {
    height: 100%;
}

html

<div class="home-gallery">
    <div class="rc-contain">
       ....contain
    </div>
    <div class="rc-slider">
       ....slider
    </div>
</div>

css

html, body {
    height: 100%;
}
.home-gallery{
  position: relative;
  height: 100%;
  width: 100%;
  border:1px solid;
}

.rc-contain{
  position:absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.rc-slider{
  position:absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

voici jsfiddle : Démo

Answer 2

* {
  padding: 0;
  margin: 0;
}
div {
  border: 1px solid;
  box-sizing: border-box;
}
.home-gallery {
  position: relative;
  height: 100vh;
  width: 100%;
}
.rc-contain {
  position: absolute;
  bottom: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(255, 0, 0, .2);
  /* red */
}
.rc-slider {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 255, .2);
  /* blue */
}

<div class="home-gallery">
  <div class="rc-contain">
    ....
  </div>
  <div class="rc-slider">
    ....
  </div>
</div>