Блог

HTML-код:

 <div class="program-contents">

   <div class="program-item"> ... </div>
   <div class="program-item"> ... </div>
   ...
   <div class="program-item"> ... </div>

</div>
  

Стили для .program-содержимого:

 margin-left: 25px;
margin-top: -35px;
padding: 35px 25px 0 25px;
border-left: 2px solid #e2e0e0;
  

Как я могу установить высоту для границы слева от .program-contents как 90%? Я пытаюсь не отображать нижнюю часть границы слева для .program-contents. Мне нужно 90% высоты «слева от границы» для этого блока.

Вы можете попробовать использовать псевдоэлементы. Вот как:

 .program-contents {
    height: 300px;
    width: 300px;
    background-color: #EEE;

}

.program-contents::before {
    display: block;
    height: 90%;
    content: ' ';
    border-left: 1px #AAA solid;
}
  

:before Псевдоэлемент может использоваться для вставки сгенерированного содержимого перед содержимым элемента. Я установил его высоту равной 90% от его родительского элемента (который является .program-contents ), а затем добавил к нему левую границу.

И если вам нужно, чтобы граница была центрирована по вертикали, вы можете добавить top: 5% . Что-то вроде этого:

 .program-contents::before {    
    position: relative;
    top: 5%;
    display: block;
    height: 90%;
    content: ' ';
    border-left: 1px #AAA solid;
}