Skip to content

Instantly share code, notes, and snippets.

@kossoy

kossoy/index.html

Created October 3, 2012 17:11
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 kossoy/3828377 to your computer and use it in GitHub Desktop.
Save kossoy/3828377 to your computer and use it in GitHub Desktop.
Download ZIP
Sticky header and footer with scrollable content
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
* {
font-family: Arial, sans-serif;
font-size: 1em;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.containter {
background: #0fffff;
overflow: auto;
top: 4em;
bottom: 6em;
position: fixed;
margin-right: 14em;
}
.list li {
border-bottom: 1px solid #green;
}
.header {
height: 4em;
width: 100%;
left: 0;
top: 0;
position: absolute;
background: #d2d2d2;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
color: #ffffff;
background: #303030;
width: 100%;
height: 6em;
}
.right-box {
position: fixed;
right: 0;
width: 14em;
top: 4em;
bottom: 6em;
background: #20238e;
color: #ffffff;
}
.header p,
.right-box p,
.footer p {
padding-left: 1em;
font-weight: bold;
}
#lipsum {
padding: 1em;
}
</style>
<body>
<div class="containter">
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet massa et turpis scelerisque et
laoreet dolor vulputate. Suspendisse potenti. Pellentesque sagittis purus eget turpis pellentesque commodo.
Curabitur malesuada, turpis a lobortis ultricies, nulla leo fermentum neque, mollis pellentesque nunc nisi a
sapien. Cras nisl nisl, ullamcorper sed ultrices eget, imperdiet quis leo. Vestibulum rhoncus suscipit dui
at iaculis. Fusce elementum dui ac orci scelerisque vel auctor nulla convallis. Vestibulum tempor odio et
justo pretium porta.
</p>
<p>
Duis diam nisl, auctor ut pharetra non, adipiscing consequat sem. Donec mauris magna, consequat quis sodales
vel, pulvinar ac mauris. Donec vulputate porttitor libero sed imperdiet. Vivamus ut ipsum eget tortor
aliquam molestie. Maecenas ut metus non velit posuere malesuada. Sed et sapien nulla. Praesent augue ante,
placerat eu euismod sit amet, rhoncus vel nibh. Etiam ullamcorper elit purus, quis fringilla ipsum. Aliquam
erat volutpat. Pellentesque sed nisl et orci tristique gravida. Quisque a sem est, viverra egestas velit.
Nam ornare sem felis. Aenean bibendum mi a leo condimentum pulvinar. Aenean congue risus nec magna elementum
hendrerit et sed metus. Vestibulum a nisi ante, quis fringilla ligula. Nullam convallis orci in lectus
hendrerit fermentum.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac magna
odio, ac egestas felis. In imperdiet, nibh a posuere elementum, massa orci mattis justo, quis elementum
sapien quam aliquet odio. Pellentesque et leo quis velit pellentesque tristique sed id ipsum. Nulla
fringilla felis porttitor arcu tristique congue. Proin nunc ligula, mollis sit amet luctus nec, luctus vel
orci. Sed eget leo a ante iaculis vehicula ut id purus. Aliquam congue dictum vehicula. Integer in nulla
tortor. Sed erat leo, vulputate quis malesuada eget, porta ac risus. Donec in risus ante. Sed pharetra diam
non purus lacinia iaculis.
</p>
<p>
Suspendisse quis arcu quis ligula fringilla ultricies. Phasellus sed turpis at justo iaculis condimentum.
Cras sodales consectetur libero, non malesuada nunc volutpat at. Praesent commodo eleifend nunc ut
facilisis. In hac habitasse platea dictumst. Nam ut magna in dolor molestie accumsan vel nec enim. Maecenas
nisl sem, cursus a eleifend a, aliquet id magna. Aliquam erat volutpat. Proin tristique euismod massa, at
suscipit arcu fringilla eu. Phasellus mollis tristique eleifend. Praesent dapibus felis sit amet felis
semper eget dapibus augue dapibus. Mauris dapibus feugiat neque nec laoreet. Duis congue magna a nulla
porttitor volutpat.
</p>
<p>
Nullam pharetra scelerisque mattis. Aenean congue libero sollicitudin ligula rhoncus adipiscing. Morbi non
condimentum velit. Curabitur quam ante, lobortis at aliquam eget, convallis eget ipsum. Ut vestibulum lacus
ac erat euismod commodo. Praesent purus risus, congue sed convallis at, laoreet non augue. Nullam urna odio,
pretium quis sagittis nec, tincidunt nec elit.
</p></div>
</div>
<div class="header"><p>Header</p></div>
<div class="footer"><p>Footer</p></div>
<div class="right-box"><p>RB</p></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment