Как CSS вертикальной линии на 100% контейнера

Question

У меня есть вертикальная линия в центре на моей странице. Но я хочу, чтобы строка была полной контейнера, в котором находится div вертикальной линии. Когда я использую высоту: 100%; на вертикальной линии div линия достигает размера высоты моего разрешения монитора. Это CSS для строки:

.line {        
border-left: 6px solid  #3C948B;
margin-left: -3px;
height: 100%;
position: absolute;
left: 50%;        
z-index:-5;}     

Answer 1

Когда вы используете процентную высоту, вы должны также проверить родительскую высоту.А затем высота родительского родителя и т. Д. Это, вероятно, означает, что вам нужно добавить height: 100% к вашим html, body тегам.И потенциально для любых оберток у вас под ними.

Answer 2

Контейнер, содержащий строку, должен иметь определенную высоту:

div {
  height: 2000px;
}
.line {        
border-left: 6px solid  #3C948B;
margin-left: -3px;
height: 100%;
position: absolute;
left: 50%;        
z-index:-5;}

<div>
<span class="line"></span>
</div>