如何使子 div 成為位置絕對父容器的 100% 高度

Question

如何使子 div 成為位置絕對固定父容器的 100% 高度？

HTML

<div class="parent">
  <div class="child">
  </div>
</div> 

CSS

.parent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
}

Answer 1

一個想法是讓父元素成為 flex 容器，這樣子元素默認會被拉伸：

 .parent { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid red; display: flex; } .child { background: blue; }

 <div class="parent"> <div class="child"> text </div> </div>

Answer 2

真的很簡單： JSFiddle

您只需為您的孩子div添加一個 100% 的高度。 為了證明它確實有效，我更改了父 div 的頂部和底部，以便您可以看到子項是其父項的 100%。

.parent {
  position: absolute;
  top: 25px;
  right: 0;
  bottom: 25px;
  left: 0;
  background: steelblue;
}

.child {
  height: 100%;
  width: 50%;
  background: pink;
}

Answer 3

對子 div 使用 100% 高度，例如

.Child{
height:100%;
}

Answer 4

您應該能夠添加100%的高度。

 .parent { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #eee; } .child { width: 100px; height: 100%; background-color: blue; }

 <div class="parent"> <div class="child"> </div> </div>

Answer 5

也要給孩子絕對位置，並且身高100％；

.child {
position:absolute;
height: 100%;

}

但是如果您不想讓孩子成為絕對孩子，則給它相對位置和身高100％；

.child {
position:relative;
height: 100%;

}

簡單。
如果需要，我可以舉幾個例子。

Answer 6

這是一個替代方案：

使用position: relative對於父級和height: 100%用於子級

<div class="parent">
  <div class="child">
    child
  </div>
</div>

.parent {
  position: relative;  
}
.child {
  position: absolute;
  height: 100%;  
}

這是一個codepen演示

Answer 7

你應該給孩子 div 100vh 高度

.child{
 height:100vh;
}