Skip to content

Instantly share code, notes, and snippets.

@cmoran92

cmoran92/scroll-3.html

Last active November 12, 2018 15:38
Show Gist options
  • Save cmoran92/a6f2ba18839f01798d3066216ed87d1d to your computer and use it in GitHub Desktop.
Save cmoran92/a6f2ba18839f01798d3066216ed87d1d to your computer and use it in GitHub Desktop.
Download ZIP
Scrollable DIV with dynamic header and footer
Raw
scroll-3.html
<html>
<head>
<style>
body, .container {
height: 100%;
position: relative;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
.top-fixed-size {
position: absolute !important;
left: 150px;
width: 500px;
top: 150px;
height: 300px !important;
}
.top-full-page {
position: relative !important;
left: 0px;
width: 100%;
top: 0px;
height: 100% !important;
}
.container {
position: relative;
display: flex;
flex-direction: column;
}
.header {
flex-shrink: 0;
background-color: #FFA;
}
.content{
overflow-y: auto;
height: 100%;
background-color: #AFF;
}
.footer {
aborder: blue solid 1px;
height: 50px;
flex-shrink: 0;
background-color: #FAF;
}
</style>
</head>
<body>
<div class="top-full-page container">
<div class="header">
<p>Dynamic size without scrollbar</p>
<p>Dynamic size without scrollbar</p>
<p>Dynamic size without scrollbar</p>
</div>
<div class="container">
<div class="header">
<p>Another Dynamic size without scrollbar</p>
<p>Another Dynamic size without scrollbar</p>
<p>Another Dynamic size without scrollbar</p>
</div>
<div class="content">
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
</div>
</div>
<div class="footer">
<p>Fixed size without scrollbar</p>
<p>Fixed size without scrollbar</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment