Created
January 20, 2023 12:42
-
-
Save neisdev/fa571d9dea9957cf0b3749030ff0499c to your computer and use it in GitHub Desktop.
css grid layout overflow body
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
| <div class="page-header"> | |
| <p class="add">Add</p> | |
| </div> | |
| <div class="page-subheader"> | |
| <h1 class="title is-6">Dashboard</h1> | |
| </div> | |
| <div class="page-sidebar"></div> | |
| <div class="content-menu"> | |
| <div class="field"> | |
| <div class="control"> | |
| <input type="text" class="input"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="content-body"> | |
| <h2 class="title is-4">Some Content</h2> | |
| <h2 class="subtitle is-5">Some Content</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem suscipit rerum quos. Consequatur recusandae provident sequi temporibus, praesentium libero et dignissimos in adipisci nam harum aut odio pariatur vel labore. | |
| Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit mollitia culpa cumque delectus odit nam, eos unde dolore dolorum magnam hic nostrum veniam qui, sunt quae molestiae dignissimos, ipsa tenetur? | |
| Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque eos facilis fuga, fugit officiis architecto doloribus odit hic aperiam delectus autem cum sed repellat error nesciunt soluta ratione cupiditate illum! | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores unde a sunt quo. Dolore, odio harum fugiat dolor quos beatae, nulla, sed ipsam expedita molestias nostrum iste totam dolorem repellendus. | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae id assumenda blanditiis, explicabo nulla temporibus debitis ad tenetur. Natus, inventore. Natus sequi, accusamus dolores libero earum provident nihil eligendi eum. | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis perspiciatis impedit, quas nemo ea quae perferendis eos distinctio libero quod praesentium ab ipsa. Doloremque, vel perspiciatis nisi perferendis totam adipisci | |
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet perspiciatis minus hic eveniet accusamus quae laudantium nesciunt odio. Optio fugit eos earum officiis explicabo, alias laboriosam aspernatur iste voluptatibus fugiat! | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem suscipit rerum quos. Consequatur recusandae provident sequi temporibus, praesentium libero et dignissimos in adipisci nam harum aut odio pariatur vel labore. | |
| Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit mollitia culpa cumque delectus odit nam, eos unde dolore dolorum magnam hic nostrum veniam qui, sunt quae molestiae dignissimos, ipsa tenetur? | |
| Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque eos facilis fuga, fugit officiis architecto doloribus odit hic aperiam delectus autem cum sed repellat error nesciunt soluta ratione cupiditate illum! | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores unde a sunt quo. Dolore, odio harum fugiat dolor quos beatae, nulla, sed ipsam expedita molestias nostrum iste totam dolorem repellendus. | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae id assumenda blanditiis, explicabo nulla temporibus debitis ad tenetur. Natus, inventore. Natus sequi, accusamus dolores libero earum provident nihil eligendi eum. | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis perspiciatis impedit, quas nemo ea quae perferendis eos distinctio libero quod praesentium ab ipsa. Doloremque, vel perspiciatis nisi perferendis totam adipisci | |
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet perspiciatis minus hic eveniet accusamus quae laudantium nesciunt odio. Optio fugit eos earum officiis explicabo, alias laboriosam aspernatur iste voluptatibus fugiat! | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem suscipit rerum quos. Consequatur recusandae provident sequi temporibus, praesentium libero et dignissimos in adipisci nam harum aut odio pariatur vel labore. | |
| Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit mollitia culpa cumque delectus odit nam, eos unde dolore dolorum magnam hic nostrum veniam qui, sunt quae molestiae dignissimos, ipsa tenetur? | |
| Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque eos facilis fuga, fugit officiis architecto doloribus odit hic aperiam delectus autem cum sed repellat error nesciunt soluta ratione cupiditate illum! | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores unde a sunt quo. Dolore, odio harum fugiat dolor quos beatae, nulla, sed ipsam expedita molestias nostrum iste totam dolorem repellendus. | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae id assumenda blanditiis, explicabo nulla temporibus debitis ad tenetur. Natus, inventore. Natus sequi, accusamus dolores libero earum provident nihil eligendi eum. | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis perspiciatis impedit, quas nemo ea quae perferendis eos distinctio libero quod praesentium ab ipsa. Doloremque, vel perspiciatis nisi perferendis totam adipisci | |
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet perspiciatis minus hic eveniet accusamus quae laudantium nesciunt odio. Optio fugit eos earum officiis explicabo, alias laboriosam aspernatur iste voluptatibus fugiat! | |
| </p> | |
| </div> | |
| <div class="content-footer"> | |
| <butto class="button is-pulled-right">Submit</butto> | |
| </div> |
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
| // document.body.classList.add('slim') |
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
| $white: white; | |
| $lighgray: #f8f8f8; | |
| $gray: #efefef; | |
| $teal: #03363D; | |
| $dark: #2F3941; | |
| $primary: $white; | |
| $ternary: $lighgray; | |
| $bisect: $gray; | |
| $dark-accent: $teal; | |
| $text: $dark; | |
| $border: 1px solid rgb(233, 235, 237); | |
| $padding: 1.5rem; | |
| $page-header-background: $primary; | |
| $page-header-color: $text; | |
| $page-subheader-background: $ternary; | |
| $page-subheader-color: $text; | |
| $page-sidebar-width: 4rem; | |
| $page-sidebar-background: $dark-accent; | |
| $page-sidebar-color: $text; | |
| $content-menu-width: 16rem; | |
| $content-menu-background: $ternary; | |
| $content-menu-color: $text; | |
| $content-body-background: $primary; | |
| $content-body-color: $text; | |
| $content-footer-height: 4rem; | |
| $content-footer-background: $primary; | |
| $content-footer-color: $text; | |
| body { | |
| height: 100vh; | |
| display: grid; | |
| grid-template: | |
| "sidebar header header" auto | |
| "sidebar subheader subheader" auto | |
| "sidebar menu content-body" auto | |
| "sidebar menu content-footer" auto / #{$page-sidebar-width} $content-menu-width auto; | |
| } | |
| body.slim { | |
| .page-subheader, | |
| .content-footer | |
| { | |
| display: none; | |
| } | |
| } | |
| .page-header { | |
| grid-area: header; | |
| background: $page-header-background; | |
| color: $page-header-color; | |
| border-bottom: $border; | |
| padding: 1rem; | |
| display: flex; | |
| } | |
| .page-subheader { | |
| grid-area: subheader; | |
| background: $page-subheader-background; | |
| color: $page-subheader-color; | |
| border-bottom: $border; | |
| padding: 1rem; | |
| } | |
| .page-sidebar { | |
| grid-area: sidebar; | |
| background: $page-sidebar-background; | |
| color: $page-sidebar-color; | |
| border-right: $border; | |
| } | |
| .content-menu { | |
| grid-area: menu; | |
| background: $content-menu-background; | |
| color: $content-menu-color; | |
| border-right: $border; | |
| padding: $padding; | |
| } | |
| .content-body { | |
| grid-area: content-body; | |
| overflow-y: scroll; | |
| background: $content-body-background; | |
| color: $content-body-color; | |
| padding: $padding; | |
| } | |
| .content-footer { | |
| grid-area: content-footer; | |
| background: $content-footer-background; | |
| color: $content-footer-color; | |
| border-top: $border; | |
| padding: .75rem; | |
| } | |
| html, | |
| body { | |
| overflow: hidden !important; | |
| } |
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
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment