如何显示的子元素 <li> 在100％的高度？

Question

I am having an issue trying to make a specific element inside my <li> tag to take up 100% of the <li> height. Specifically I want an icon I added with a border on its right to fill the entire height of the <li> element.

as you can see from the last item in the list, the border for the download icon does not take the entire height of its <li> element. How can I fix this?

My code:

    <ul>
        <li>طلب المشروع من قبل الجهة المستفيدة<div class="download"><a href="#" class="active"><i class="fa fa-download"></i></a></div></li>
        <li class="list_background">وجود قرار تخصيص موقع من قبل المجلس البلدي<div class="download"><a href="#" class="active"><i class="fa fa-download"></i></a></div></li>
        <li>بكتاب الامانة العامة لمجلس الوزراء رقم 344 - 3679 المؤرخ<div class="download"><a href="#" class="inactive"><i class="fa fa-download"></i></a></div></li>
        <li class="list_background">على مهندس المشروع التأكد من استيفاء ما     يلي حسب ما جاء بكتاب الأمانة العامة لمجلس الوزراء رقم 344-3679 
         المؤرخ (مرفق صورة من الكتاب المذكور) :
         <br>- استلام متطلبات المشروع معتمدة من قبل الجهة المستفيدة.
         <br>- إعداد كراسة طلب المشروع.
         <br>- الحصول على موافقة وزارة  المالية على اعتماد ميزانية المشروع.
         <br>- شهادة خلو الموقع من العوائق.<div class="download"><a href="#"   class="inactive"><i class="fa fa-download"></i></a></div></li>
    </ul>

CSS:

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}
ul li {
  direction: rtl;
  text-align: right;
  padding: 0 1rem 0 0;
  margin: 0;
  font-size: 1.1rem;
  color: #8c97b2;
  font-weight: 400;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #dadfea;
  line-height: 54px;
  height: 100%;
}
ul li .download {
  height: 100%;
  float: left;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #dadfea;
  display: block;
}
ul li .download i {
  font-size: 22px;
  width: 54px;
  text-align: center;
  height: 100%;
}

Answer 1

To achieve that you have to use table structure which mean make the li tag act as table and content act as tabel-cell and icon act as another table cell.

also add a container for the text and never let it flow on any container

 ul { padding: 0; margin: 0; list-style: none; width: 100%; } ul li { direction: rtl; text-align: right; padding: 0 1rem 0 0; margin: 0; font-size: 1.1rem; color: #8c97b2; font-weight: 400; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #dadfea; line-height: 54px; height: 100%; display: table; width:100%; } ul li .download { height: 100%; float: left; border-right-style: solid; border-right-width: 1px; border-right-color: #dadfea; display: tablle-cell; } ul li p{ display:table-cell; } ul li .download i { font-size: 22px; width: 54px; text-align: center; height: 100%; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <ul> <li><p>طلب المشروع من قبل الجهة المستفيدة</p><div class="download"><a href="#" class="active"><i class="fa fa-download"></i></a></div></li> <li class="list_background"><p>وجود قرار تخصيص موقع من قبل المجلس البلدي</p><div class="download"><a href="#" class="active"><i class="fa fa-download"></i></a></div></li> <li><p>بكتاب الامانة العامة لمجلس الوزراء رقم 344 - 3679 المؤرخ</p><div class="download"><a href="#" class="inactive"><i class="fa fa-download"></i></a></div></li> <li class="list_background">على مهندس المشروع التأكد من استيفاء ما يلي حسب ما جاء بكتاب الأمانة العامة لمجلس الوزراء رقم 344-3679 المؤرخ (مرفق صورة من الكتاب المذكور) : <br>- استلام متطلبات المشروع معتمدة من قبل الجهة المستفيدة. <br>- إعداد كراسة طلب المشروع. <br>- الحصول على موافقة وزارة المالية على اعتماد ميزانية المشروع. <br>- شهادة خلو الموقع من العوائق.</p><div class="download"><a href="#" class="inactive"><i class="fa fa-download"></i></a></div></li> </ul> 

Answer 2

You now need to align icon vertically to acheive that we need to add sudo element just after your .download div to align the icon vertically

ul li .download:after{
 content:"";
 vertical-align:middle;
 display:inline-block;
 height:100%;
}
ul li .download a{
 display: inline-block;
 vertical-middle: middle;
}

Check the result HERE

and check this article for a guide to align elements vertically

Hope everything working fine with you