title: How to clear opaque affixed divs height?
body: <p>Using Bootstrap and a bunch of custom CSS for social media icons (located <a href="http://codepen.io/h3xc0ntr0l/pen/GpmyGQ" rel="nofollow">here</a>), I created a pen to demo (and test) my code. The goal was to create icons that would automatically fit there parent div (horizontal or vertical, etc), and I have everything working except for one small problem. I have both of the divs affixed (one horizontal, one vertical), and 100% opaque before the affix is triggered. However, and I know <em>why</em>, the view is still being rendered with what basically looks like a giant margin between the top of the document and the page title. How can I clear this, while still using <code>display:inline-block</code>?</p>
  
  <p>Here is the CSS for the related divs &amp; classes, but I'd recommend checking out the <a href="http://codepen.io/h3xc0ntr0l/pen/MamOwE" rel="nofollow">pen</a> first because visually seeing it expalins the issue much better.:</p>
  
  <pre><code>.snav {
    top:50%;
    margin-left:-15px;
    background: rgb(0, 0, 0);
    width:5rem;
    height:25rem;
    display:inline-block;
    z-index:99;
    transition: 1s all ease-in;
    transform: translate(0, -50%);
    opacity:0;
  }
  
  
  .horiz{
    top:0;
    margin-left: auto;
    margin-right:auto;
    z-index:99;
    left:50%;
    transition: 1s all ease;
    transform: translate(-50%, 0);
    opacity:0;
    display:inline-block;
  }
  
  #horiz{
    background: rgb(0,0,0);
    width:26.6rem;
    height:5rem;  
  }
  
  .affix{
    opacity:.5;
  }
  
  .affix:hover{
    opacity:.9;
  }
  </code></pre>