Created
April 28, 2016 18:48
-
-
Save tristen/f11ada26c2a696b1bf801949d876a7a3 to your computer and use it in GitHub Desktop.
Full height sidebar with scrollable content
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 id='map' class='fill-grey col12 pin-top pin-bottom'></div> | |
| <div class='sidebar pin-topleft pin-bottomleft pad1 z1'> | |
| <div class='sidebar-inner fill-white round sidebar-inner'> | |
| <header class='pad2 fill-blue round-top 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 round-bottom dark'> | |
| <p class='small strong'>Footer content</p> | |
| </footer> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .sidebar { | |
| 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; | |
| } | |
| /* Mobile rules */ | |
| @media only screen and (max-width:640px) { | |
| .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