bootstrap 3: height 100% doesn't work in the nested row

Question

expected
I'm trying set 100% height in the nested row with the code below:

<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>

But it output as output

Below links are helpful. Do check them http://stackoverflow.com/questions/14545507/div-height-in-percentage http://stackoverflow.com/questions/1622027/percentage-height-html-5-css — Sankar Krishnamoorthy, Apr 30 '16 at 04:47
Possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — Atula, Apr 30 '16 at 04:58

Fil · Answer 1 · 2016-04-30T05:54:02.787

I would suppose you're doing it in two column layout, you can do that using bootstrap by setting the parent div with height so that.

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

has the basis of 100% property,

For example:

<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>

Hope this help

Your exmaple is a fixed height, I need height percentage. – user3030712 Apr 30 '16 at 05:42 — user3030712, Apr 30 '16 at 05:42
Using percentage must rely on parent div's fixed height – Fil Apr 30 '16 at 05:53 — Fil, Apr 30 '16 at 05:53

Gleb Kemarsky · Accepted Answer · 2016-04-30T07:31:45.087

0

You can use Bootstrap Tables instead of rows and columns.

UPD. I've added coloured outlines for cells.

<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>

edited Apr 30 '16 at 07:31

answered Apr 30 '16 at 06:30

Gleb Kemarsky

10,160
7
43
68

That's what I'm looking for! – user3030712 Apr 30 '16 at 09:05
@user3030712 Don't forget to check the table [on small devices](http://getbootstrap.com/css/#tables-responsive). If you are satisfied, [mark an answer as accepted](http://stackoverflow.com/help/someone-answers). – Gleb Kemarsky Apr 30 '16 at 09:51

bootstrap 3: height 100% doesn't work in the nested row

2 Answers2