Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <header>header</header>
- <section>
- <aside>aside long content...</aside>
- <main>main long content...</main>
- <aside>aside long content...</aside>
- </section>
- <footer>footer</footer>
- body {
- margin: 0;
- height: 100vh;
- display: flex;
- flex-direction: column;
- }
- header, footer {
- height: 50px;
- min-height: 50px;
- background: black;
- color: #fff;
- }
- section {
- flex-grow: 1;
- display: flex;
- }
- section aside {
- width: 100px;
- background: #ccc;
- height:100%;
- overflow:scroll;
- }
- section main {
- overflow:scroll;
- flex-grow: 1;
- }
- body {
- margin: 0;
- height: 100vh;
- display: flex;
- flex-direction: column;
- }
- header, footer {
- height: 50px;
- min-height: 50px;
- background: black;
- color: #fff;
- transition-property: height;
- transition-duration: 0.2s;
- transition-timing-function: linear;
- }
- section {
- flex-grow: 1;
- display: flex;
- height:0px; /* <== for scrolls in aside */
- }
- aside {
- width: 100px;
- background: #ccc;
- overflow:auto;
- min-height: 0;
- transition-property: width;
- transition-duration: 0.2s;
- transition-timing-function: linear;
- }
- section main {
- overflow:auto;
- flex-grow: 1;
- }
- footer:hover
- {
- height:200px;
- }
- aside:hover
- {
- width:200px;
- }
- <header>header</header>
- <section>
- <aside><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p></aside>
- <main>main long content...</main>
- <aside><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p><p>main long content...</p></aside>
- </section>
- <footer>footer</footer>
Add Comment
Please, Sign In to add comment