title: Grid with Expanding Preview - Calculate Height Based on Content Height
body: <p>I am using the functionality from the "<a href="http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview" rel="nofollow noreferrer">Thumbnail Grid with Expanding Preview</a>" tutorial (like everyone else it would seem O_o) I have it all working pretty much the way I want, except that instead of div.og-expanded expanding to the full height of the page, I'd like div.og-expanded to expand only to the size of the content within the container instead. </p>
  
  <p>I'm using the latest code from <a href="https://github.com/codrops/ThumbnailGridExpandingPreview" rel="nofollow noreferrer">Github</a>. </p>
  
  <p>The height of div.og-expanded seems to be controlled by calcHeight : function in grid.js</p>
  
  <pre><code>        calcHeight : function() {
  
          var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded,
              itemHeight = winsize.height;
  
          if( heightPreview &lt; settings.minHeight ) {
              heightPreview = settings.minHeight;
              itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
          }
  
          this.height = heightPreview;
          this.itemHeight = itemHeight;
  
      },
      setHeights : function() {
  
          var self = this,
              onEndFn = function() {
                  if( support ) {
                      self.$item.off( transEndEventName );
                  }
                  self.$item.addClass( 'og-expanded' );
              };
  
          this.calcHeight();
          this.$previewEl.css( 'height', this.height );
          this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn );
  
          if( !support ) {
              onEndFn.call();
          }
  
      },
  </code></pre>
  
  <p>As I said, instead of using the window size to get the height, I'd like to base it off of the content height of div.og-expander-inner. I saw a similar question "<a href="https://stackoverflow.com/questions/19916419/expanding-preview-calcheight-function">Expanding preview (calcHeight : function)</a>" The solution calculated the height based on the content of (what is essentially) div.og-fullimg or div.og-details whichever is taller. This is a decent solution as it took the responsiveness of the content into consideration, which is important to me. Unfortunately, I couldn't sort out how to apply this solution to the original source code.</p>
  
  <p>Any help here would be greatly appreciated.</p>