Created
June 18, 2014 14:39
-
-
Save arbalest/8e690685fdca9896a29d to your computer and use it in GitHub Desktop.
HTML5 / CSS3 "frameset" style layout with a toolbar, fixed width side panel and dynamic width main panel
This file contains 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> | |
| <title>App Layout Base | Method #1 | Fixed Toolbar : Fixed Sidebar Panel : Fluid Main Panel</title> | |
| <style type="text/css"> | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .toolbar { | |
| /** A total height of 50px (height + padding top + padding bottom) **/ | |
| height: 30px; | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| padding-left: 3px; | |
| padding-right: 3px; | |
| background-color: #333333; | |
| color: white; | |
| } | |
| .side-panel { | |
| position: absolute; | |
| top: 50px; | |
| left: 0; | |
| width: 300px; | |
| height: calc(100% - 50px); /* Calculate as full height minus fixed height of toolbar */ | |
| overflow: auto; | |
| background-color: #dddddd; | |
| } | |
| .main-panel { | |
| width: calc(100% - 300px); | |
| margin-left: 300px; | |
| height: calc(100% - 50px); | |
| overflow: auto; | |
| background-color: #f0f0f0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="toolbar"> | |
| Toolbar | |
| </div> | |
| <div class="side-panel"> | |
| Side Panel | |
| </div> | |
| <div class="main-panel"> | |
| Main Panel | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment