Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save stuntbox/8570842 to your computer and use it in GitHub Desktop.
Save stuntbox/8570842 to your computer and use it in GitHub Desktop.
A Pen by David Sleight.
<div id="modal">
<article>
<header>Fixed Header</header>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor, augue in venenatis lacinia, ante justo adipiscing felis, sit amet ornare massa turpis ac augue. Pellentesque feugiat, turpis sit amet molestie tempor, odio eros ornare risus, eget ullamcorper sem nisl ac orci. In id velit interdum, dignissim enim ut, tristique nisi. Mauris malesuada egestas orci egestas consequat. Nam ultricies ipsum lectus. Proin at diam at nisl vehicula fringilla. Donec eget aliquam ante. Sed accumsan tempus nibh, quis pulvinar tellus ultrices sed. Etiam vitae arcu id nisi cursus lacinia. Donec gravida mattis ipsum id varius. Ut eleifend auctor magna. Nunc et leo sed velit blandit aliquet ac lobortis eros. Mauris nec lobortis neque, ac pharetra tortor. Curabitur vitae mi velit. Mauris mollis diam sed tristique aliquet.</p>
<p>Mauris sit amet magna dolor. Praesent facilisis scelerisque nunc, et condimentum lectus iaculis malesuada. Praesent ornare tristique velit, id suscipit enim faucibus ac. Aliquam tristique felis quis ultrices sollicitudin. In sollicitudin lectus justo, dictum pulvinar ante faucibus sodales. Nullam at augue sem. Sed faucibus, magna et ornare facilisis, nulla arcu facilisis nisl, eget dictum nibh diam nec enim. Cras et nisi vitae lorem tristique eleifend vitae luctus sapien.</p>
<p>Morbi at nulla et elit adipiscing rutrum luctus et velit. Mauris tincidunt urna at neque hendrerit, non ultrices velit imperdiet. Etiam vitae faucibus eros, a vulputate libero. Vivamus hendrerit neque non libero imperdiet, quis auctor turpis condimentum. Cras eget diam id velit scelerisque posuere eget sit amet nunc. Nullam eu lectus eget elit tempor aliquam ac sit amet augue. Duis venenatis eget sapien bibendum aliquam. Integer sapien risus, tincidunt in lacinia eget, lacinia nec tellus. Duis sed quam varius, ornare quam ut, laoreet elit. Donec ut adipiscing urna. Curabitur in sapien eget magna interdum aliquet in nec libero. Mauris mattis sollicitudin lectus, nec pulvinar justo cursus ac. Praesent iaculis et dolor in pellentesque.</p>
<p>Donec eget mauris semper, varius lorem eu, lacinia tortor. Proin ut nulla et leo sagittis volutpat. Duis placerat, purus ut tincidunt congue, odio erat porttitor mauris, vel convallis sem magna id dui. Curabitur libero turpis, egestas eu sagittis non, tincidunt nec libero. Aliquam ac sodales mi, nec mollis purus. Phasellus imperdiet pulvinar mi, ut fermentum lectus. Vivamus elit turpis, commodo ut lacus sit amet, pharetra aliquet mauris. Phasellus a imperdiet lectus. Quisque nec eros vitae leo vestibulum gravida eget at risus. Sed vitae sapien tempor dolor tincidunt rhoncus. Donec venenatis sem est, ac elementum justo adipiscing non. Etiam diam magna, consectetur et volutpat tristique, porttitor id tellus. Donec vel laoreet eros. Proin dignissim lectus quis est cursus, eu aliquet sapien molestie.</p>
<p>Suspendisse et sodales elit, non malesuada arcu. Cras molestie nibh id euismod pharetra. Nulla id porttitor tortor. Aliquam viverra dolor eget sodales fermentum. Nunc libero ligula, ultricies quis pretium dapibus, imperdiet id augue. Suspendisse facilisis euismod posuere. Curabitur eget aliquam nulla. Aenean eu turpis at metus pellentesque feugiat. Vestibulum at semper arcu. Proin dictum vehicula est. Proin fringilla accumsan ante, a molestie dolor dapibus quis. Praesent lacus ipsum, accumsan nec massa in, sollicitudin rhoncus odio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor, augue in venenatis lacinia, ante justo adipiscing felis, sit amet ornare massa turpis ac augue. Pellentesque feugiat, turpis sit amet molestie tempor, odio eros ornare risus, eget ullamcorper sem nisl ac orci. In id velit interdum, dignissim enim ut, tristique nisi. Mauris malesuada egestas orci egestas consequat. Nam ultricies ipsum lectus. Proin at diam at nisl vehicula fringilla. Donec eget aliquam ante. Sed accumsan tempus nibh, quis pulvinar tellus ultrices sed. Etiam vitae arcu id nisi cursus lacinia. Donec gravida mattis ipsum id varius. Ut eleifend auctor magna. Nunc et leo sed velit blandit aliquet ac lobortis eros. Mauris nec lobortis neque, ac pharetra tortor. Curabitur vitae mi velit. Mauris mollis diam sed tristique aliquet.</p>
<p>Mauris sit amet magna dolor. Praesent facilisis scelerisque nunc, et condimentum lectus iaculis malesuada. Praesent ornare tristique velit, id suscipit enim faucibus ac. Aliquam tristique felis quis ultrices sollicitudin. In sollicitudin lectus justo, dictum pulvinar ante faucibus sodales. Nullam at augue sem. Sed faucibus, magna et ornare facilisis, nulla arcu facilisis nisl, eget dictum nibh diam nec enim. Cras et nisi vitae lorem tristique eleifend vitae luctus sapien.</p>
<p>Morbi at nulla et elit adipiscing rutrum luctus et velit. Mauris tincidunt urna at neque hendrerit, non ultrices velit imperdiet. Etiam vitae faucibus eros, a vulputate libero. Vivamus hendrerit neque non libero imperdiet, quis auctor turpis condimentum. Cras eget diam id velit scelerisque posuere eget sit amet nunc. Nullam eu lectus eget elit tempor aliquam ac sit amet augue. Duis venenatis eget sapien bibendum aliquam. Integer sapien risus, tincidunt in lacinia eget, lacinia nec tellus. Duis sed quam varius, ornare quam ut, laoreet elit. Donec ut adipiscing urna. Curabitur in sapien eget magna interdum aliquet in nec libero. Mauris mattis sollicitudin lectus, nec pulvinar justo cursus ac. Praesent iaculis et dolor in pellentesque.</p>
<p>Donec eget mauris semper, varius lorem eu, lacinia tortor. Proin ut nulla et leo sagittis volutpat. Duis placerat, purus ut tincidunt congue, odio erat porttitor mauris, vel convallis sem magna id dui. Curabitur libero turpis, egestas eu sagittis non, tincidunt nec libero. Aliquam ac sodales mi, nec mollis purus. Phasellus imperdiet pulvinar mi, ut fermentum lectus. Vivamus elit turpis, commodo ut lacus sit amet, pharetra aliquet mauris. Phasellus a imperdiet lectus. Quisque nec eros vitae leo vestibulum gravida eget at risus. Sed vitae sapien tempor dolor tincidunt rhoncus. Donec venenatis sem est, ac elementum justo adipiscing non. Etiam diam magna, consectetur et volutpat tristique, porttitor id tellus. Donec vel laoreet eros. Proin dignissim lectus quis est cursus, eu aliquet sapien molestie.</p>
<p>Suspendisse et sodales elit, non malesuada arcu. Cras molestie nibh id euismod pharetra. Nulla id porttitor tortor. Aliquam viverra dolor eget sodales fermentum. Nunc libero ligula, ultricies quis pretium dapibus, imperdiet id augue. Suspendisse facilisis euismod posuere. Curabitur eget aliquam nulla. Aenean eu turpis at metus pellentesque feugiat. Vestibulum at semper arcu. Proin dictum vehicula est. Proin fringilla accumsan ante, a molestie dolor dapibus quis. Praesent lacus ipsum, accumsan nec massa in, sollicitudin rhoncus odio.</p>
</div>
<footer>Fixed Footer</footer>
</article>
</div><!-- end #modal -->
<!-- the rest of our page with a bunch of content -->
<div class="other-stuff">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor, augue in venenatis lacinia, ante justo adipiscing felis, sit amet ornare massa turpis ac augue. Pellentesque feugiat, turpis sit amet molestie tempor, odio eros ornare risus, eget ullamcorper sem nisl ac orci. In id velit interdum, dignissim enim ut, tristique nisi. Mauris malesuada egestas orci egestas consequat. Nam ultricies ipsum lectus. Proin at diam at nisl vehicula fringilla. Donec eget aliquam ante. Sed accumsan tempus nibh, quis pulvinar tellus ultrices sed. Etiam vitae arcu id nisi cursus lacinia. Donec gravida mattis ipsum id varius. Ut eleifend auctor magna. Nunc et leo sed velit blandit aliquet ac lobortis eros. Mauris nec lobortis neque, ac pharetra tortor. Curabitur vitae mi velit. Mauris mollis diam sed tristique aliquet.</p>
<p>Mauris sit amet magna dolor. Praesent facilisis scelerisque nunc, et condimentum lectus iaculis malesuada. Praesent ornare tristique velit, id suscipit enim faucibus ac. Aliquam tristique felis quis ultrices sollicitudin. In sollicitudin lectus justo, dictum pulvinar ante faucibus sodales. Nullam at augue sem. Sed faucibus, magna et ornare facilisis, nulla arcu facilisis nisl, eget dictum nibh diam nec enim. Cras et nisi vitae lorem tristique eleifend vitae luctus sapien.</p>
<p>Morbi at nulla et elit adipiscing rutrum luctus et velit. Mauris tincidunt urna at neque hendrerit, non ultrices velit imperdiet. Etiam vitae faucibus eros, a vulputate libero. Vivamus hendrerit neque non libero imperdiet, quis auctor turpis condimentum. Cras eget diam id velit scelerisque posuere eget sit amet nunc. Nullam eu lectus eget elit tempor aliquam ac sit amet augue. Duis venenatis eget sapien bibendum aliquam. Integer sapien risus, tincidunt in lacinia eget, lacinia nec tellus. Duis sed quam varius, ornare quam ut, laoreet elit. Donec ut adipiscing urna. Curabitur in sapien eget magna interdum aliquet in nec libero. Mauris mattis sollicitudin lectus, nec pulvinar justo cursus ac. Praesent iaculis et dolor in pellentesque.</p>
<p>Donec eget mauris semper, varius lorem eu, lacinia tortor. Proin ut nulla et leo sagittis volutpat. Duis placerat, purus ut tincidunt congue, odio erat porttitor mauris, vel convallis sem magna id dui. Curabitur libero turpis, egestas eu sagittis non, tincidunt nec libero. Aliquam ac sodales mi, nec mollis purus. Phasellus imperdiet pulvinar mi, ut fermentum lectus. Vivamus elit turpis, commodo ut lacus sit amet, pharetra aliquet mauris. Phasellus a imperdiet lectus. Quisque nec eros vitae leo vestibulum gravida eget at risus. Sed vitae sapien tempor dolor tincidunt rhoncus. Donec venenatis sem est, ac elementum justo adipiscing non. Etiam diam magna, consectetur et volutpat tristique, porttitor id tellus. Donec vel laoreet eros. Proin dignissim lectus quis est cursus, eu aliquet sapien molestie.</p>
<p>Suspendisse et sodales elit, non malesuada arcu. Cras molestie nibh id euismod pharetra. Nulla id porttitor tortor. Aliquam viverra dolor eget sodales fermentum. Nunc libero ligula, ultricies quis pretium dapibus, imperdiet id augue. Suspendisse facilisis euismod posuere. Curabitur eget aliquam nulla. Aenean eu turpis at metus pellentesque feugiat. Vestibulum at semper arcu. Proin dictum vehicula est. Proin fringilla accumsan ante, a molestie dolor dapibus quis. Praesent lacus ipsum, accumsan nec massa in, sollicitudin rhoncus odio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor, augue in venenatis lacinia, ante justo adipiscing felis, sit amet ornare massa turpis ac augue. Pellentesque feugiat, turpis sit amet molestie tempor, odio eros ornare risus, eget ullamcorper sem nisl ac orci. In id velit interdum, dignissim enim ut, tristique nisi. Mauris malesuada egestas orci egestas consequat. Nam ultricies ipsum lectus. Proin at diam at nisl vehicula fringilla. Donec eget aliquam ante. Sed accumsan tempus nibh, quis pulvinar tellus ultrices sed. Etiam vitae arcu id nisi cursus lacinia. Donec gravida mattis ipsum id varius. Ut eleifend auctor magna. Nunc et leo sed velit blandit aliquet ac lobortis eros. Mauris nec lobortis neque, ac pharetra tortor. Curabitur vitae mi velit. Mauris mollis diam sed tristique aliquet.</p>
<p>Mauris sit amet magna dolor. Praesent facilisis scelerisque nunc, et condimentum lectus iaculis malesuada. Praesent ornare tristique velit, id suscipit enim faucibus ac. Aliquam tristique felis quis ultrices sollicitudin. In sollicitudin lectus justo, dictum pulvinar ante faucibus sodales. Nullam at augue sem. Sed faucibus, magna et ornare facilisis, nulla arcu facilisis nisl, eget dictum nibh diam nec enim. Cras et nisi vitae lorem tristique eleifend vitae luctus sapien.</p>
<p>Morbi at nulla et elit adipiscing rutrum luctus et velit. Mauris tincidunt urna at neque hendrerit, non ultrices velit imperdiet. Etiam vitae faucibus eros, a vulputate libero. Vivamus hendrerit neque non libero imperdiet, quis auctor turpis condimentum. Cras eget diam id velit scelerisque posuere eget sit amet nunc. Nullam eu lectus eget elit tempor aliquam ac sit amet augue. Duis venenatis eget sapien bibendum aliquam. Integer sapien risus, tincidunt in lacinia eget, lacinia nec tellus. Duis sed quam varius, ornare quam ut, laoreet elit. Donec ut adipiscing urna. Curabitur in sapien eget magna interdum aliquet in nec libero. Mauris mattis sollicitudin lectus, nec pulvinar justo cursus ac. Praesent iaculis et dolor in pellentesque.</p>
<p>Donec eget mauris semper, varius lorem eu, lacinia tortor. Proin ut nulla et leo sagittis volutpat. Duis placerat, purus ut tincidunt congue, odio erat porttitor mauris, vel convallis sem magna id dui. Curabitur libero turpis, egestas eu sagittis non, tincidunt nec libero. Aliquam ac sodales mi, nec mollis purus. Phasellus imperdiet pulvinar mi, ut fermentum lectus. Vivamus elit turpis, commodo ut lacus sit amet, pharetra aliquet mauris. Phasellus a imperdiet lectus. Quisque nec eros vitae leo vestibulum gravida eget at risus. Sed vitae sapien tempor dolor tincidunt rhoncus. Donec venenatis sem est, ac elementum justo adipiscing non. Etiam diam magna, consectetur et volutpat tristique, porttitor id tellus. Donec vel laoreet eros. Proin dignissim lectus quis est cursus, eu aliquet sapien molestie.</p>
<p>Suspendisse et sodales elit, non malesuada arcu. Cras molestie nibh id euismod pharetra. Nulla id porttitor tortor. Aliquam viverra dolor eget sodales fermentum. Nunc libero ligula, ultricies quis pretium dapibus, imperdiet id augue. Suspendisse facilisis euismod posuere. Curabitur eget aliquam nulla. Aenean eu turpis at metus pellentesque feugiat. Vestibulum at semper arcu. Proin dictum vehicula est. Proin fringilla accumsan ante, a molestie dolor dapibus quis. Praesent lacus ipsum, accumsan nec massa in, sollicitudin rhoncus odio.</p>
</div>
#modal {
position: fixed;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
box-shadow: 5px 5px 0 0 rgba(0,0,0,0.3);
}
article {
position: absolute;
top: 0;
bottom: 0;
width: 100%; /* can use left: 0; right: 0; as well */
background: #ccc;
}
article header {
width: 100%;
height: 3em;
background-color: #666;
}
article .content {
position: absolute;
top: 3em;
bottom: 3em;
width: 100%; /* can use left: 0; right: 0; as well */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
article footer {
position: absolute;
bottom: 0;
width: 100%; /* can use left: 0; right: 0; as well */
height: 3em;
background: #666;
}
.other-stuff {
color: #ccc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment