Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div {
      border: 1px solid black;
      display: flex;
      flex-direction: column;
      height: 500px;
      margin: 1em;
      overflow: auto;
      width: 500px;
    }
    header, footer {
      background: gray;
      padding: 2em;
    }
    main {
      flex: 1 0 auto;
      padding: 2em;
    }
    p {
      margin: 0;
    }
  </style>
</head>
<body>
  <div>
    <header>Multi<br>line<br>header</header>
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium metus eu arcu gravida ultricies. Vestibulum aliquam massa non commodo efficitur. Aenean vitae tortor dui. Fusce imperdiet aliquam dolor sit amet commodo. Curabitur ultrices in nisi eget fermentum. Sed nec aliquet est. Aliquam erat volutpat. Ut sit amet metus non ex viverra finibus ut ut massa. Quisque tempor bibendum mauris et vulputate.</p>
  <p>Suspendisse purus lectus, mollis sit amet tincidunt eget, aliquet et nisl. Nullam lorem enim, congue ac lacus non, sollicitudin tincidunt lectus. Pellentesque ligula mi, iaculis non ornare ac, facilisis eget enim. Nunc mattis imperdiet libero, vel facilisis nisi fringilla vitae. Etiam venenatis ligula vitae felis ornare sollicitudin. Fusce venenatis convallis dolor non pulvinar. Donec gravida consectetur dolor, sit amet commodo eros elementum at. Phasellus vel dignissim enim, sit amet porttitor nunc. Fusce sagittis, est non mollis cursus, erat nisi blandit neque, id faucibus metus nibh eu enim. Fusce pellentesque varius faucibus. In tincidunt facilisis urna nec facilisis. Pellentesque at arcu ac dui venenatis vulputate. Morbi vel neque eros.</p>
      <p>Sed quis ipsum a enim dictum elementum. Donec in tincidunt nulla, in mollis sem. Donec condimentum turpis in metus dictum, at luctus lacus scelerisque. Phasellus erat risus, fringilla ac mi ac, convallis faucibus eros. Donec dapibus malesuada dolor, eget venenatis tellus feugiat at. Aliquam lorem arcu, dapibus eget sapien in, dignissim venenatis neque. Donec at interdum mauris. Pellentesque finibus sem eget porttitor viverra. Suspendisse quam metus, bibendum non nisi ut, feugiat rutrum turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec magna arcu, varius in velit id, pellentesque malesuada augue. Ut porttitor sapien et velit tempus condimentum. Ut imperdiet, orci sit amet porta viverra, arcu neque ornare odio, in dictum ligula felis eget augue. Etiam hendrerit lectus nec velit maximus elementum. Donec venenatis nec justo vel elementum.</p>
      <p>Nullam in vulputate orci. Nunc ornare facilisis turpis vitae scelerisque. Sed dictum lobortis turpis, eget vulputate leo placerat vel. Nam fringilla eros lectus, eget efficitur sem molestie cursus. Nulla porta accumsan sollicitudin. Praesent tincidunt, quam quis malesuada semper, velit metus aliquam elit, sit amet vulputate nisl sapien eget odio. Quisque fermentum egestas lorem vel tempus. Nulla eu sem massa. Nunc dictum quis dui a laoreet. Integer nec dui fermentum, tempus augue ut, tincidunt nisl.</p>
      <p>Morbi tempor sed mauris id aliquet. Aliquam luctus dictum ultricies. Mauris mi nisi, imperdiet cursus blandit sagittis, aliquam nec nisi. Suspendisse convallis eget tellus id pharetra. Vestibulum feugiat vestibulum leo, ornare rhoncus lorem faucibus sit amet. Maecenas malesuada orci vitae nulla congue semper. Phasellus ligula felis, bibendum eget odio facilisis, aliquam faucibus diam.</p>
    </main>
    <footer>Multi<br>line<br>footer</footer>
  </div>
</body>
</html>
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers