Skip to content

Instantly share code, notes, and snippets.

@plouc
Created July 12, 2012 21:42
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 plouc/3101246 to your computer and use it in GitHub Desktop.
Save plouc/3101246 to your computer and use it in GitHub Desktop.
Untitled
html, body {
height: 100%;
margin: 0;
font-family: sans-serif;
font-size: 12px;
}
ul {
margin: 0;
padding: 0;
}
li {
padding: 7px 12px;
border-bottom: 1px solid #eee;
}
body > div {
height: 50%;
overflow: hidden;
position: relative;
}
body > div > h2 {
position: absolute;
top: 0;
z-index: 2;
width: 100%;
background: #eee;
margin: 0;
height: 30px;
line-height: 30px;
padding: 0 12px;
font-size: 15px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
body > div > div {
display: block;
box-sizing: border-box;
padding-top: 34px;
height: 100%;
}
body > div > div > div {
height: 100%;
overflow: scroll;
}
<div>
<h2>1st div</h2>
<div>
<div>
<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
<li>item d</li>
<li>item e</li>
<li>item f</li>
<li>item g</li>
<li>item h</li>
<li>item i</li>
<li>item j</li>
<li>item k</li>
<li>item l</li>
<li>item m</li>
<li>item n</li>
<li>item o</li>
<li>item p</li>
<li>item q</li>
<li>item r</li>
<li>item s</li>
<li>item t</li>
<li>item u</li>
<li>item v</li>
<li>item w</li>
<li>item x</li>
<li>item y</li>
<li>item z</li>
</ul>
</div>
</div>
</div>
<div>
<h2>2nd div</h2>
<div>
<div>
<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
<li>item d</li>
<li>item e</li>
<li>item f</li>
<li>item g</li>
<li>item h</li>
<li>item i</li>
<li>item j</li>
<li>item k</li>
<li>item l</li>
<li>item m</li>
<li>item n</li>
<li>item o</li>
<li>item p</li>
<li>item q</li>
<li>item r</li>
<li>item s</li>
<li>item t</li>
<li>item u</li>
<li>item v</li>
<li>item w</li>
<li>item x</li>
<li>item y</li>
<li>item z</li>
</ul>
</div>
</div>
</div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment