div 的全高和相对位置

Question

如何为具有相对位置的 div 分配完整高度 -

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>

但我的家庭画廊 div 没有占据全高。当我专注于响应式设计时，如何动态分配家庭画廊的高度。

Answer 1

只需将以下行添加到 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%;
}

这是 jsfiddle：演示