Created
August 23, 2023 16:30
-
-
Save RaduW/df70c47b249c51a9dea4d783f6629fc2 to your computer and use it in GitHub Desktop.
HTML Layout with scrolling
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
| <html lang="en"> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| body { | |
| margin: 0; | |
| text-align: center; | |
| } | |
| .Child { | |
| background-color: purple; | |
| color: white; | |
| height: 1700px; | |
| } | |
| .Details { | |
| background-color: #fcecfc; | |
| width: 7em; | |
| } | |
| .Statusbar , .Toolbar{ | |
| background-color: moccasin; | |
| height: 3em; | |
| } | |
| html, body { | |
| height: 100%; | |
| } | |
| .v-box { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .h-box { | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .flex { | |
| flex: 1 1 auto; | |
| } | |
| .full { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .scroll { | |
| overflow: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="v-box full"> | |
| <div class="Toolbar">toolbar</div> | |
| <div class="Main flex h-box scroll"> | |
| <div class="Details">details</div> | |
| <div class="Inner flex scroll"> | |
| <div class="Child"></div> | |
| </div> | |
| <div class="Details">details</div> | |
| </div> | |
| <div class="Statusbar">status</div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment