title: get rendered DIV height
body: <p>I've got an issue where I'm using a layout tool which resizes a load of divs. These divs have a title span, which is set to <code>bottom : 0</code>. On divs that are shortened, these are fine, however on DIVs that are lengthened, these float above the bottom of the div. </p>
  
  <p>I've tried various CSS ways to make the span stick to the bottom, however it seems that once this is rendered, and then freewall (the layout script) has it's way, the spans are not pushed back down. </p>
  
  <p>I've attempted to get the height of the parent DIV, through various methods. When I console log the div I can see it's rendered height in the element.style ( height: 222.4px ); however when I try and access the style it's only returning the css applied background image, not the rendered height.  Any attempt via jquery .height() only returns the CSS height (200px) which isn't correct. </p>
  
  <p>Any ideas how to either ensure an element stays bottom after a layout resizing, or way to access the rendered height so I can programatically stick it back at the bottom? </p>
  
  <p>Here is the CSS</p>
  
  <pre><code>.guideScene
  {
      height :            200px;
      width :             200px;
      min-width :         190px;
      background-size:    cover; 
      background-repeat:  no-repeat;
      background-position: center;
      position:           absolute;
  
  }
  
  
  @media all and (max-width: 768px) {
      .guideScene {
          height :        100px;
      }
  }
  
  .guideScene span
  {
      font-family:        'Lato', sans-serif;
      font-color :        #000;
      font-weight:        700;
      font-size:          14px;
      line-height:        100%;
      min-height:         14px;
      background:         #fff;
      padding:            4px 10px 4px 10px;
      bottom:             0px;
      width:              100%;
      position:           absolute;
  
  }
  </code></pre>
  
  <p>Here you go popNoodles:</p>
  
  <pre><code>        console.log( $(this.parentNode).outerHeight(true) );
          console.log( $(this.parentNode).height() );
  </code></pre>
  
  <p>or          <code>console.log( $(this.parentNode).attr('style')</code> -returns the background </p>
  
  <pre><code>        console.log(this.parentElement) gives me the data
  </code></pre>
  
  <p>It's this attribute here I'm trying to access!</p>
  
  <p><img src="https://i.stack.imgur.com/fPHEp.jpg" alt="enter image description here"></p>