Skip to content

Instantly share code, notes, and snippets.

@AllenSH12

AllenSH12/index.html

Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AllenSH12/9286402 to your computer and use it in GitHub Desktop.
Save AllenSH12/9286402 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="description" content="a scrollable list of items with a fixed height header">
<title>JS Bin</title>
</head>
<body>
<div id="courseNavModule">
<div class="header row">
<ul class="list-group" id="courseNavHeader">
<li class="list-group-item">
Information
</li>
<li class="list-group-item">
<input id="newCourseName" type="text" placeholder="Add Week">
</li>
</ul>
</div>
<div class="body row scroll-y">
<ul class="list-group">
<li class="list-group-item">Week 1</li>
<li class="list-group-item">Week 2</li>
<li class="list-group-item">Week 3</li>
<li class="list-group-item">Week 4</li>
<li class="list-group-item">Week 5</li>
<li class="list-group-item">Week 6</li>
<li class="list-group-item">Week 7</li>
<li class="list-group-item">Week 8</li>
<li class="list-group-item">Week 9</li>
<li class="list-group-item">Week 10</li>
<li class="list-group-item">Week 11</li>
<li class="list-group-item">Week 12</li>
<li class="list-group-item">Week 13</li>
<li class="list-group-item">Week 14</li>
<li class="list-group-item">Week 15</li>
<li class="list-group-item">Week 16</li>
<li class="list-group-item">Week 17</li>
<li class="list-group-item">Week 18</li>
<li class="list-group-item">Week 19</li>
<li class="list-group-item">Week 20</li>
<li class="list-group-item">Week 21</li>
<li class="list-group-item">Week 22</li>
<li class="list-group-item">Week 23</li>
<li class="list-group-item">Week 24</li>
<li class="list-group-item">Week 25</li>
<li class="list-group-item">Week 26</li>
<li class="list-group-item">Week 27</li>
<li class="list-group-item">Week 28</li>
<li class="list-group-item">Week 29</li>
<li class="list-group-item">Week 30</li>
</ul>
</div>
</div>
</body>
</html>
Raw
styles.css
/*
* http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
*/
* {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0
}
.row,
.col {
overflow: hidden;
position: absolute;
}
.row {
left: 0;
right: 0;
}
.col {
top: 0;
bottom: 0;
}
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row {
height: 95px;
top: 0;
border-bottom: 1px solid #ddd;
}
p {
margin: 0;
}
.body.row {
top: 95px;
bottom: 0;
}
.list-group {
margin: 0;
padding: 0;
list-style-type: none;
}
.list-group-item {
padding: 10px 5px;
border-top: 1px solid #ddd;
}
#newCourseName {
display: block;
width: 100%;
padding: 7px;
font-size: 14px;
border-radius: 4px;
border: 1px solid #ddd;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment