欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css 自适应高度

程序员文章站 2022-03-02 18:29:31
...

想实现的是,div中包裹几个div,然后这里层的div高度是不定的,随着最高的div的高度一致展现。

 <div class="table_cell">
                            <div class="title-header">
                              <div class="table-title-cell">No.</div>
                              <div class="table-title-cell">检测内容</div>
                              <div class="table-title-cell">结果</div>
                              <div class="table-title-cell">结果信息</div>
                              <div class="table-title-cell">操作</div>
                            </div>
                
                            <div class="table-row" v-for="(sub_item,index2) in item.children" :key="index2">

                            <div class="show_sequence">
                              {{index2+1}}
                            </div>
      
                              <div class="show_content_div">
                                      <div class="operate_title">
                                        <span class="check-point-title">验证点</span>
                                        <span class="operate_desc">
                                            {{sub_item.name}}
                                        </span>
                                        </div>
                                      <div class="operate_title">
                                        <span class="check-point-desc">描述</span>
                                      <span class="operate_desc">{{sub_item.desc}}</span>
                                      </div>
                                      <div>
                                        <span class="check-point-expect">期望结果</span>
                                      <span class="operate_desc">{{sub_item.expect}}</span>
                                      </div> 
                                  
                              </div>

                              <div class="show_res_icon">
                                  <el-button type="success" v-if="sub_item.set_result_manual==1" icon="el-icon-check" @click="set_result(sub_item,1)" size="mini" circle></el-button>
                                  <el-button type="warning" v-if="sub_item.set_result_manual==2" icon="el-icon-close" @click="set_result(sub_item,0)"   size="mini" circle></el-button>
                                  <el-button type="info" v-if="sub_item.set_result_manual==0" icon="el-icon-question" @click="set_result(sub_item,0)"   size="mini" circle></el-button>

                              </div>
                            
                                <div class="show_result_div">
                                      
                                </div>
                                <div class="show_btn_div">
                                  <el-button type="text" @click="set_result(sub_item,1)" size="mini" class="select_icon"><i class="el-icon-check"></i>验证成功</el-button>
                                  <el-button type="text" @click="set_result(sub_item,2)" style="color:#E6A23C" size="mini" class="select_icon"><i class="el-icon-close"></i>验证失败</el-button>
                                </div>
                                </div>
                            </div>

采用的是 display:table  和display:table-cell的方式来控制自适应高度

.table_cell{
    display: table;
    width: 100%;
   }
   .show_res_icon{
     width: 10%;
     display:table-cell;
     background: #F2F6FC;
     border: 1px solid  white;
     text-align: center;
     vertical-align:middle;
   }   
.title-header{
     display:table-header-group;
     border: 1px solid #F2F6FC;

   }
   .table-row{
     display: table-row;
   }
   .table-title-cell{
     display: table-cell;
     text-align: center;
     vertical-align: middle;
   }
   .show_sequence{
     width: 10%;
     display:table-cell;
    text-align: center;
     vertical-align: middle;
     border: 1px solid #F2F6FC;
   }