html - 如何让 的子元素以 100% 的高度显示？

Question

我在尝试在我的 <li> 中创建特定元素时遇到问题标签占据 <li> 的 100%高度。具体来说，我想要一个图标，我在其右侧添加了一个边框，以填充 <li> 的整个高度。元素。

从列表的最后一项可以看出，下载图标的边框并没有占据其 <li> 的整个高度。元素。我该如何解决这个问题？

我的代码:

    <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

要实现这一点，您必须使用表格结构，这意味着让 li 标记充当表格，内容充当表格单元格，图标充当另一个表格单元格。

还为文本添加一个容器，永远不要让它在任何容器上流动

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>