Skip to content

Instantly share code, notes, and snippets.

@ykessler

ykessler/fixed_v.html

Last active August 29, 2015 14:14
Show Gist options
  • Save ykessler/d10ffabdbdfa3348f267 to your computer and use it in GitHub Desktop.
Save ykessler/d10ffabdbdfa3348f267 to your computer and use it in GitHub Desktop.
Download ZIP
Method for vertically-fixed layouts
Raw
fixed_v.html
<html>
<body>
<style>
/* ========= FIXED-V LAYOUT =========
The fixed-v layout method is a pure-css solution to the problem of creating
sidebars and sub-headers that are fixed vertically relative to the screen
(i.e. they don't scroll up/down with the body content), yet move horizontally
along with that scrolling content in a fixed-width layout.
For example, if we set up a standard, 800px-wide centered container for our content,
but want our sidebar not to scroll up/down, there's no obvious traditional solution.
If we styled our sidebar as position:fixed, it would be fixed in both vertical AND horizontal directions,
meaning that as we expanded a browser window horizontally, the scrolling content would stay centered
while the fixed sidebar would remain in its original position relative to the browser window,
resulting in a broken layout.
A fixed-v layout provides a means of positioning elements in a fixed position
relative to the vertical axis of the screen, while still allowing them to adjust horizontally
as if they were part of the regular centered content.
*/
/*
Establishes a fixed vertical context for the rest of the layout
(NOTE: Possible z-index adjustments done here as well?)
*/
.fixed-v-anchor {
background:lime;
height:2px;
left:0;
position:fixed;
right:0;
top:0;
}
/* The container for all fixed-v content */
.fixed-v-content {
background:lime;
height:100vh; /* Maintains a height = the browser window height. SEE: http://stackoverflow.com/a/16837667/165673 */
position:relative;
width:2px;
}
/* Same as the .centered-container, but with a height:0, so that it doesn't block content underneath */
.fixed-v-center-container {
margin:0 auto;
height:0;
position:relative;
width:800px;
}
/* Centered, fixed-with container used for all content horizontally-centered content */
.center-container {
background:#CCC;
margin:0 auto;
position:relative;
width:800px;
}
/* A vertically-fixed sidebar */
.sidebar {
background:yellow;
bottom:50px;
left:0;
overflow-y: auto;
padding:0;
position:absolute;
right:0;
top:50px;
width:300px;
}
body {
margin:0;
}
ul {
list-style:none;
margin:0;
padding:0;
}
ul.sidebar-list {
}
ul.main-list {
background:#CCC;
margin-left:320px;
padding:0;
}
</style>
</body>
<div class="center-container">
<br>
<a href="http://www.example.com">A Link</a>
<a href="http://www.example.com">A Link</a>
<a href="http://www.example.com">A Link</a>
<br>
<ul class="main-list">
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
</ul>
</div>
<div class="fixed-v-anchor">
<div class="fixed-v-center-container">
<div class="fixed-v-content">
<div class="sidebar">
<ul class="side-list">
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
<li><a href="http://www.example.com">A Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment