Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
  <script>
        // Add a Modernizr-test for the weird, inbetween, flexbox implementation
        // in IE10, necessary for the "sticky" footer.
        // (See https://github.com/Modernizr/Modernizr/issues/812)
        // (This could be rolled into a custom Modernizr build in production later.)
        Modernizr.addTest('flexboxtweener', Modernizr.testAllProps('flexAlign', 'end', true));
  </script>
</head>
<body>
  <header role="banner">
    <h1>My important site</h1>
  </header>
  <main role="main">
    <h2>Very important stuff about things</h2>
    
    <p>Lucius Nieman layoffs Google News the medium is the massage This Week in Review Romenesko MinnPost innovation syndicated gutter paywall, digital circulation strategy going forward should isn't a business model Does my "yes, but" look big in this corner office? scoop blog.</p>
    <p>Wikipedia election-night hologram the notion of the public newsonomics, election-night hologram curation layoffs Patch algorithms natural-born blogger Flipboard Android Arab spring. </p>
  </main>
  <footer role="contentinfo">
    <p>Contact me: <a href="#">edgar@example.com</a></p>
  </footer>
</body>
</html>
 
/* The new <main> is not styled in the UA stylesheet for IE10, so we need to set it to display block */
main {
  display: block;
}
.flexboxtweener, .flexboxtweener>body {
  height: 100%;
}
body {
  font-family: Monaco, Consolas, monospaced;
  min-height: 100vh;
  
  /**
  * Making the <body> element behave like a flexbox container:
  */
  
  /* Ye Olde Flexbox for Webkit */
  display: -webkit-box;
  /* Tweener flexbox */
  display: -ms-flexbox;
  /* Prefixed "new flexbox" */
  display: -webkit-flex;
  /* unprefixed standard "new flexbox" version */
  display: flex;
  
  /**
  * Making the things inside <body> line up vertically
  */
  
  /* Your grandparents flexbox for Webkit */
  -webkit-box-orient: vertical;
  /* Prefixed new syntax: */
  -webkit-flex-direction: column;
  /* Same syntax for weird IE tweener */
  -ms-flex-direction: column;
  /* unprefixed new syntax */
  flex-direction: column;
  padding: 0;
  margin: 0;
}
header {
  background-color: #ccc;
}
header h1 {
  margin: 0;
  padding: 1rem;
}
main {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  padding: 1rem;
}
footer[role="contentinfo"] {
  background-color: #000;
}
footer[role="contentinfo"] a {
  color: #fff;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
thatemilpro
0viewers