div的全高度与相对位置

Question

如何为具有相对位置的div指定全高 -

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是我的家庭画廊没有采取全高度。当我专注于响应式设计时，如何动态地为家庭图库指定高度。

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：demo

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 3

设置HTML正文的全宽度

 html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

之后，您可以将div的相对位置设置为全宽和全高

.container {
  position: relative;
  background-color: blue;
  height: 100%;
  width: 100%;
  border:1px solid;
  color: white;
  background-image: url("https://images.pexels.com/photos/5591663/pexels-photo-5591663.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-color: #cccccc;
}

最终结果：

https://codepen.io/hiteshsahu/pen/XWKYEYb?editors=0100