title: Cut off bottom of element with dynamic height
body: <p>I recently registered for a forum that let's you modify your post layout with a little bit of CSS but the problem is that at the bottom of each post it always adds a few line breaks and a couple of dashes to separate your post's content and your signature. I do not plan on ever using a signature and the only things I put in that section are the two closing tags for the post layout. What I am trying to do it crop the bottom of the inner element so that the line breaks and dashes below each post are hidden. Here's a link to my profile on the forum which contains an example post.</p>
  
  <p><a href="http://jul.rustedlogic.net/profile.php?id=3182" rel="nofollow noreferrer">http://jul.rustedlogic.net/profile.php?id=3182</a></p>
  
  <p>Keep in mind I need for the inner element (<code>.dialogue</code>) to always be centered vertically and horizontally. Both it's height and width are dynamic.</p>
  
  <p>EDIT: Having trouble with the height of the background element.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import "http://fonts.googleapis.com/css?family=Amatic+SC";
  .background{
    position:relative;
    background:#30619c url(http://example.com/jul/cave-bottom.gif) repeat-x bottom left;
    height:100%;
    padding:60px;
    text-align:center;
  }
  .background:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    background:url(http://example.com/jul/cave-top.gif) repeat-x top left;
    width:100%;
    height:131px
  }
  .background:after{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle
  }
  .dialogue{
    text-align:left;
    position:relative;
    display:inline-block;
    vertical-align:middle;
    font-smooth:never;
    -webkit-font-smoothing:none;
    border:16px solid transparent;
    border-image:url(http://example.com/jul/yi-border.png);
    border-image-slice:16;
    border-image-repeat:repeat;
    background-color:#286048;
    padding:10px;
    font-family:'Amatic SC',monospace;
    font-size:24px;
    color:#fff;z-index:1
  }
  .dialogue a{
    color:#fff
  }
  .dialogue blockquote{
    margin:10px 0;
    padding:10px;
    background:rgba(0,0,0,0.4);
    border:none
  }
  .dialogue blockquote hr{
    visibility:hidden;
    margin:0
  }
  .dialogue blockquote font:first-child{
    font-family:'Amatic SC',monospace;
    font-size:21px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;td valign="top" height="220" id="post3182" class="tbl font tdbg1"&gt;
    &lt;div class="background"&gt;
      &lt;div class="dialogue" style="overflow: hidden;"&gt;
        Sample text. 
        &lt;blockquote&gt;
          &lt;font class="fonts"&gt;
            &lt;i&gt;Originally posted by fhqwhgads&lt;/i&gt;
          &lt;/font&gt;
          &lt;hr&gt;
          A sample quote, with a 
          &lt;a href="about:blank"&gt;link&lt;/a&gt;
          , for testing your layout.
          &lt;hr&gt;
        &lt;/blockquote&gt;
        This is how your post will appear.
        &lt;br&gt;&lt;br&gt;
        --------------------
        &lt;br&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/td&gt;</code></pre>
  </div>
  </div>
  </p>