引导程序 3：高度 100% 在嵌套行中不起作用答案

【问题标题】：bootstrap 3: height 100% doesn't work in the nested row引导程序 3：高度 100% 在嵌套行中不起作用
【发布时间】：2016-08-25 08:23:57
【问题描述】：

expected
我正在尝试使用以下代码在嵌套行中设置 100% 的高度：

<div class="row">
        <div class="col-md-4">
            <!--This is not working-->
            <div style="height:100%">
                First Column, First Cell
            </div>
        </div>
        <div class="col-md-8">
            <div class="row">
            <div class="col-xs-12">
                Second Column, First Cell
            </div>
            <div class="col-xs-12">
                Second Column, Second Cell
            </div>
            <div class="col-xs-12">
                Second Column, Third Cell
            </div>
        </div>
    </div>
</div>

但它输出为 output

【问题讨论】：

以下链接很有帮助。请检查他们*.com/questions/14545507/div-height-in-percentage *.com/questions/1622027/…
将<div style="height=100%"> 更改为<div style="height:100%">
已更改
但仍然无法正常工作。
你需要两栏显示吗？
How can I make Bootstrap columns all the same height?的可能重复

标签： html css

【解决方案1】：

您可以使用Bootstrap Tables 代替行和列。

UPD。我为单元格添加了彩色轮廓。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<style>
  td {
    border: 0 !important;
    outline: 4px solid;
    outline-offset: -8px;
    padding: 16px !important;
  }
  .red-box {
    outline-color: red;
  }
</style>

<div class="container">
  <table class="table">
    <tr>
      <td rowspan="3" class="red-box">First Column, First Cell</td>
      <td>Second Column, First Cell</td>
    </tr>
    <tr>
      <td>Second Column, Second Cell</td>
    </tr>
    <tr>
      <td>Second Column, Third Cell</td>
    </tr>
  </table>
</div>

【讨论】：

这就是我要找的！
@user3030712 不要忘记查看表格on small devices。如果您满意，mark an answer as accepted。

【解决方案2】：

我想你是在两列布局中做的，你可以使用 bootstrap 通过设置父 div 的高度来做到这一点。

<div style="height=100%;">                        
   First Column, First Cell                      
</div>

具有100%属性的基础，

例如：

<div class="container-fluid">
  <div class="row">            
    <div class="col-md-12">              
      <div class="row">                
        <div class="col-md-6" style="height: 100px;">                  
          <div class="row" style="height: 100px;">                    
            <div class="col-md-12" style="height: 100px;">                      
              <div style="height:100%;border: 1px solid black;">                        
                First Column, First Cell                      
              </div>                    
            </div>                  
          </div>                
        </div>                
        <div class="col-md-6" style="height: 100px;border: 1px solid black;">                  
          <div class="row">                    
            <div class="col-md-12">                      
              <div class="row">                        
                <div class="col-xs-12">                          
                  Second Column, First Cell                        
                </div>                        
                <div class="col-xs-12">
                  Second Column, Second Cell
                </div>
                <div class="col-xs-12">
                  Second Column, Third Cell
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

希望有帮助

【讨论】：

你的例子是固定高度，我需要高度百分比。
使用百分比必须依赖父div的固定高度