Problems at the height of a div, how to set 'automatic' height?

Navigation
2

See the example in this fiddle

I want the height of the blue div to be according to the height that the table on your right is. in the fiddle is well explanatory, any doubt I shot in the comments, I tried everything but I can not. 

<div style=' display: inline-block; border-style: solid; border-color: grey; border-width: 2px; border-radius: 4px; padding: 10px;'>
  <div style='background-color: rgb(245,245,245);  display: inline-block;'> 
    <div style='background-color:blue; width: 150px; display: inline-block; float:left;'><span style='color: white;'>a altura desta div tem que ser até o final da ultima tabela</span></div>
  
      <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       
  </div>
</div>

<br><br>

<div style=' display: inline-block; border-style: solid; border-color: grey; border-width: 2px; border-radius: 4px; padding: 10px;'>
  <div style='background-color: rgb(245,245,245);  display: inline-block;'> 
    <div style='background-color:blue; width: 150px; display: inline-block; float:left;'><span style='color: white;'>a altura desta div tem que ser até o final da ultima tabela</span></div>
  
      <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       
  </div>
</div>

<br><br>

<div style=' display: inline-block; border-style: solid; border-color: grey; border-width: 2px; border-radius: 4px; padding: 10px;'>
  <div style='background-color: rgb(245,245,245);  display: inline-block;'> 
    <div style='background-color:blue; width: 150px; display: inline-block; float:left;'><span style='color: white;'>a altura desta div tem que ser até o final da ultima tabela</span></div>
  
      <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div><div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div><div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       <div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div><div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div><div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div><div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div><div style="float:left;">
        <table border='1' style='background-color: red;'>
          <tr>
            <td>ola</td>
            <td>teste</td>
          </tr>
        </table>  
       </div>
       
  </div>
</div>
    
asked by anonymous 02.02.2018 / 15:12

1 answer

1

To do this, place in the%% Pai in the Blue Box position: relative; padding-left: 150px;

See working in the template below 

    
    
<div style=' display: inline-block; border-style: solid; border-color: grey; border-width: 2px; border-radius: 4px; padding: 10px;'>
    <div style='background-color: rgb(245,245,245);  display: inline-block;'> 
      <div style='background-color:blue; width: 150px; display: inline-block; float:left;'><span style='color: white;'>a altura desta div tem que ser até o final da ultima tabela</span></div>
    
        <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         
    </div>
  </div>
  
  <br><br>
  
  <div style=' display: inline-block; border-style: solid; border-color: grey; border-width: 2px; border-radius: 4px; padding: 10px;'>
    <div style='background-color: rgb(245,245,245);  display: inline-block;'> 
      <div style='background-color:blue; width: 150px; display: inline-block; float:left;'><span style='color: white;'>a altura desta div tem que ser até o final da ultima tabela</span></div>
    
        <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         
    </div>
  </div>
  
  <br><br>
  
  <div style=' display: inline-block; border-style: solid; border-color: grey; border-width: 2px; border-radius: 4px; padding: 10px;'>
    <div style='background-color: rgb(245,245,245);  display: inline-block; 
    position: relative;
    padding-left: 150px;'> 
      <div style='background-color:blue; width: 150px; display: inline-block; float:left;    
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;'><span style='color: white;'>a altura desta div tem que ser até o final da ultima tabela</span></div>
    
        <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         
    </div>
  </div>

<div style=' display: inline-block; border-style: solid; border-color: grey; border-width: 2px; border-radius: 4px; padding: 10px;'>
<div style='background-color: rgb(245,245,245);  display: inline-block; 
position: relative;
padding-left: 150px;'> 
  <div style='background-color:blue; width: 150px; display: inline-block; float:left;    
  position: absolute; top: 0; bottom: 0; left: 0;'><span style='color: white;'>a altura desta div tem que ser até o final da ultima tabela</span></div>

    <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div><div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div><div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div><div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div><div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div><div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     <div style="float:left;">
      <table border='1' style='background-color: red;'>
        <tr>
          <td>ola</td>
          <td>teste</td>
        </tr>
      </table>  
     </div>
     
</div>
  </div>
    
02.02.2018 / 16:18
How to declare a cursor type variable in PL-SQL? Is it possible to search a data in the database without knowing which table it is in?