title: Does `div::after {content: ""; height: 100%}` only works when `div {position: absolute;}`?
body: <h2>Brief question:</h2>
  
  <p>Does <code>div::after {content: ""; display: block; height: 100%;}</code> only works when <code>div {position: absolute;}</code>?</p>
  
  <p>Also does <code>height: 100%</code> refer to the height of related div tag?</p>
  
  <h2>Explains:</h2>
  
  <p>I was trying to make a div have the ability to over scroll one page even if it reaches the bottom. So I used the following css:</p>
  
  <pre class="lang-css prettyprint-override"><code>div::after {
      content: "";
      display: block;
      height: 100%;
  }
  div {
      position: absolute;
      top: 0;
      bottom: 0;
  }
  </code></pre>
  
  <p>Why ::after height: 100% only works when div has absolute positioning?</p>
  
  <p>Is there any better solution? Because I don't like to add absolute positioning when it's not necessary.</p>
  
  <h3>Update 1:</h3>
  
  <p>I use Chrome 27</p>