title: Can't fit a panel inside a Twitter Bootstrap 3 column grid
body: <p>I have the following CSS and HTML code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container-fluid{
      height:100%;
  }
  
  html,body,.container {
      height:100%;
  }
  .container {
      display:table;
      width: 100%;
      margin-top: -50px;
      padding: 50px 0 0 0; /*set left/right padding according to needs*/
      box-sizing: border-box;
  }
  
  /**/
  
  .container-fluid {
      height:100%;
      display:table;
      width: 100%;
      margin-top: -50px;
      padding: 50px 0 0 0; /*set left/right padding according to needs*/
      box-sizing: border-box;
  }
  
  .row {
      height: 100%;
      display: table-row;
  }
  
  .row .no-float {
      display: table-cell;
      float: none;
  }
  
  &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12 col-md-7 col-lg-7 no-float" style="padding: 0 !important; border: solid blue"&gt;
  
  
              &lt;iframe src="http://exame.abril.com.br/tecnologia/facebook/noticias/facebook-nao-tem-planos-de-voltar-a-china-diz-executivo"  style="border: none;"&gt;&lt;/iframe&gt;
  
          &lt;/div&gt;
          &lt;div class="col-sm-12 col-md-5 col-lg-5  no-float" style=" padding:0; border: solid red"&gt;
  &lt;div class="row"&gt;
      &lt;div class="panel panel-default" style="height: 100%!important; width: 100%!important; border: solid black "&gt;
          &lt;div class="panel-heading"&gt;QUESTIONS&lt;/div&gt;
          &lt;div class="panel-body"&gt;
              &lt;div&gt;
                  &lt;a&gt;
                      &lt;form  style="display: inline-block;  "&gt;
                          &lt;div class="input-group col-md-12"&gt;
                              &lt;input type="text" class="  search-query form-control" placeholder="Recherche une question sur ce contenu" /&gt;
                              &lt;span class="input-group-btn"&gt;
                                      &lt;button class="btn btn-default" type="button" &gt;
                                          &lt;span class=" glyphicon glyphicon-search"&gt;&lt;/span&gt;
                                      &lt;/button&gt;
                                  &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;button type="button" class="btn btn-question"&gt;Ask new question&lt;/button&gt;
              &lt;/div&gt;
  
              
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want the panel (with questions title) fitting the whole div with <code>class="col-sm-12 col-md-5 col-lg-5  no-float"</code> (100% full height, 100% full width), just like the <code>iframe</code> in the first div, but I've got something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/uhiR9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uhiR9.png" alt="enter image description here"></a>
  I firstly had issues with columns full height, that I solved reading this <a href="https://stackoverflow.com/questions/19089384/twitter-bootstrap-3-two-columns-full-height">post</a>
  Now I have an issue to fit the panel into a column grid, but I can't even after reading this <a href="https://stackoverflow.com/questions/24816175/fitting-a-panel-into-bootstraps-grid-system">post</a></p>
  
  <p>Please how can you help me ? </p>