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

Asked

Viewed 72 times

2

take 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. no fiddle is well explanatory, any doubt I shoot in the comment, I tried everything but I can’t.

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

html css
  • 1

    Young when I try to put the code directly in your question, there are tools designed exclusively for this! Avoid external links

  • makes sense, I’ll do it. But I thought it was okay

1 answer

1


To do this put on the Father position: relative; padding-left: 150px; in the Blue Box position: absolute; top: 0; bottom: 0; left: 0;

See working on the model 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>

  • Could you explain to me why it works? Because I don’t understand, but I know it worked

  • 1

    Julio the first part is to put postion:relative and a margin-left on the father, to ward off the red Tables, the margin-left has the same width as the box-blue. Ai Vc puts position:Bsolute in the blue box, as the father has position:relative he will get "stuck" inside the father and floating without needing to float. Here comes the alignments, left:0 for him to disregard his father’s Marg-left, then top:0 to paste on top of his father, and bottom:0 to also glue on his father’s foot. As the content inside the parent increases, the blue box remains glued to the left, top bottom regardless of the parent’s height.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.