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>
</head>
<body>
<header><h1>Acme Headers Inc.</h1></header>
  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet vehicula arcu. Nulla facilisi. Cras vel bibendum tortor, quis auctor odio. In purus ipsum, rhoncus nec ultricies ultrices, consectetur a libero. Proin sagittis commodo libero nec lacinia. Quisque id lorem bibendum, tristique diam vel, semper enim. Duis aliquet diam vestibulum turpis tincidunt, sit amet varius justo vestibulum.</p>
    <p>Sed vulputate, nisl non ornare dictum, tellus lectus dapibus turpis, id tempor nulla massa vitae nulla. Sed blandit accumsan urna sed auctor. Praesent commodo eleifend eros at tempor. In massa enim, mollis ornare lectus a, posuere posuere ante. Phasellus dignissim sodales porttitor. Duis eleifend hendrerit tristique. Etiam dignissim risus nec est condimentum lobortis. Donec id tellus ut sem consectetur facilisis a id risus. Proin consectetur elit nulla, vel rutrum augue aliquam vitae. Nunc venenatis mi consectetur, iaculis leo vitae, vehicula sem. Nulla eleifend justo quis urna vehicula interdum.</p>
​
  <p>Maecenas et tristique orci, ac volutpat tortor. Donec sit amet sem tincidunt, malesuada felis a, ultricies turpis. Vivamus vulputate neque non interdum adipiscing. Duis sed luctus lacus. Quisque scelerisque sapien in mauris ornare hendrerit ac ut ligula. Nam sodales libero sed tellus feugiat posuere. Duis semper augue sit amet ornare blandit. Duis dignissim neque a ipsum elementum, iaculis gravida augue interdum. Phasellus condimentum purus rhoncus sapien gravida, in dignissim metus accumsan. Quisque non mattis lectus, eget tempor quam.</p>
 
    <p>Maecenas et tristique orci, ac volutpat tortor. Donec sit amet sem tincidunt, malesuada felis a, ultricies turpis. Vivamus vulputate neque non interdum adipiscing. Duis sed luctus lacus. Quisque scelerisque sapien in mauris ornare hendrerit ac ut ligula. Nam sodales libero sed tellus feugiat posuere. Duis semper augue sit amet ornare blandit. Duis dignissim neque a ipsum elementum, iaculis gravida augue interdum. Phasellus condimentum purus rhoncus sapien gravida, in dignissim metus accumsan. Quisque non mattis lectus, eget tempor quam.</</main>
  
<footer>Sponsored by Footers LTD</footer>
</body>
</html>
 
header{
  position: fixed;
  left:0;
  right:0;
  top:0;
  border:solid blue 1px;
  background-color:rgba(100,100,255,.8);
  text-align:center;
  height:80px;
}
main{
  padding:20px;
  position:fixed;
  top: 80px; /*same as header height*/
  bottom: 40px;/*same as footer height */
  overflow-y:scroll;
}
​
footer{
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  border:solid red 1px;
  background-color:rgba(255,100,100,.8);
  text-align:center;
  height:40px;
}
Output

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

Dismiss x
public
Bin info
JSlotepro
0viewers