Skip to content

Instantly share code, notes, and snippets.

@tristen

tristen/index.html

Last active May 30, 2016 03:33
Show Gist options
  • Save tristen/61927d11b592b031321ee3e5b4a51d5e to your computer and use it in GitHub Desktop.
Save tristen/61927d11b592b031321ee3e5b4a51d5e to your computer and use it in GitHub Desktop.
Download ZIP
Full height sidebar with offset positioned map
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<link href='site.css' rel='stylesheet' />
</head>
<body>
<div class='sidebar'>
<div class='sidebar-inner fill-white sidebar-inner'>
<header class='pad2 fill-blue dark'>
<h3>Title</h3>
<p class='quiet'>Some description</p>
</header>
<div class='pad2 keyline-bottom'>
Some fixed content
</div>
<div class='flex-scroll scroll-styled pad2'>
Scrollable content
</div>
<footer class='pad2 fill-blue dark'>
<p class='small strong'>Footer content</p>
</footer>
</div>
</div>
<div id='map' class='map'></div>
</body>
</html>
Raw
site.css
.sidebar {
position:absolute;
top:0;
bottom:0;
width:360px;
}
.sidebar-inner {
display:-webkit-box;
display:flex;
-webkit-box-orient:vertical;
flex-direction:column;
height:100%;
}
.sidebar-inner .flex-scroll {
overflow-y:scroll;
min-height:0;
-webkit-box-flex:1;
flex:1;
}
.map {
background:#eee;
width:calc(100% - 360px); /* Use calc to add an offset equal to the sidebar */
position:absolute;
top:0;
bottom:0;
right:0;
}
/* Mobile rules */
@media only screen and (max-width:640px) {
.map { width:100%; }
.sidebar {
position:absolute;
width:100%;
padding:0;
margin:0;
border-radius:0;
top:auto;
bottom:0;
height:40%;
z-index:10;
}
.sidebar-inner {
height:100%;
border-radius:0;
box-shadow:none;
}
.sidebar .round-top,
.sidebar .round-bottom { border-radius:0; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment