CodePen

HTML

            
              <h2>Interesting. (a more impressive pen: <a href="http://codepen.io/Merri/pen/gBJui">keep the border in place</a>)</h2>
<p>Make me big.</p>
<ul>
  <li>Firefox: OK</li>
  <li>Chrome: OK</li>
  <li>Internet Explorer 10: OK</li>
  <li>Internet Explorer 9: OK</li>
  <li>Internet Explorer 8: OK, but no <code>border-radius</code></li>
  <li>Internet Explorer 7: no support for <code>display: table;</code></li>
  <li>Opera: OK, but insists to have a vertical scrollbar for whatever reason</li>
</ul>
            
          
!
via HTML Inspector

CSS

            
              html {
  background: #5bb0ff;
  display: table;
  margin: 0;
  /* backwards compatibility */
  height: 98%;
  width: 98%;
  padding: 1%;
  /* the future is here! */
  height: calc(100% - 2em);
  width: calc(100% - 2em);
  padding: calc(1em);
}

body {
  background: white;
  border: 1px solid black;
  border-radius: 2em;
  display: table-cell;
  margin: 0;
  padding: .1em 1em;
}


/* unimportant */
p {
  background: #eef;
  height: 20px;
  height: 6vh;
  transition: all 1s ease-in-out;
}

p:hover {
  height: 500px;
  height: 100vh;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................