css3 - Fixed content header with a flexbox layout that has scrollable content area -
i want content header fixed content scrolls underneath. classic holy grail layout using flexbox scrollable content area.
i have tried setting content header fixed position , adding padding works sort of not take full width of content area.
html, body { height: 100%; min-height: 100%; overflow: hidden; } .holy-grail { display: flex; height: 100%; flex-direction: column; width: 80%; margin: 0 auto; } .holy-grail-body { display: flex; flex: 1; } .holy-grail-content { flex: 1; background: #ffc94e; overflow: auto; } .holy-grail-content-header { background: lightyellow; height: 50px; } .holy-grail-nav, .holy-grail-sidebar { /* 12em width of columns */ flex: 0 0 12em; background: #c9ea5d; } .holy-grail-nav { /* put nav on left */ order: -1; background: #85d6e4; } header { background: #92e4c9; } footer { background: #f7846a; } * { color: #333; }<!doctype html> <html lang="en"> <head> <title>a holy grail flexbox layout</title> </head> <body class="holy-grail"> <header> <h1>header</h1> </header> <div class="holy-grail-body"> <main class="holy-grail-content"> <header class="holy-grail-content-header">content header</header> test lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. </main> <nav class="holy-grail-nav"> <h2>navigation</h2> </nav> <aside class="holy-grail-sidebar"> <h2>sidebar</h2> </aside> </div> <footer> <h2>footer</h2> </footer> </body> </html>
i figured out, maybe there better solution, comments welcome, seems work. made flexbox column content added header, works same way outer flexbox column header, content, footer.
below completed code
html, body { box-sizing: border-box; height: 100vh; overflow: hidden; } *, *:before, *:after { box-sizing: inherit; } .holy-grail { display: flex; flex-direction: column; } .holy-grail-body { flex: 1; display: flex; flex-direction: row; } .holy-grail-content { flex: 1 1 auto; background: #ffc94e; display: flex; flex-direction: column; order: 2; } .holy-grail-content-header { background: lightyellow; flex: 0 0 50px; } .content { flex: 1; overflow:auto; } .holy-grail-nav, .holy-grail-sidebar { /* 12em width of columns */ flex: 0 0 10em; background: #c9ea5d; } .holy-grail-nav { /* put nav on left */ order: 1; background: #85d6e4; } .holy-grail-sidebar { order: 3; } header { background: #92e4c9; height: 50px; } footer { background: #f7846a; height: 50px; } * { color: #333; }<!doctype html> <html lang="en"> <head> <title>a holy grail flexbox layout</title> <link rel="stylesheet" href="styles.css"> </head> <body class="holy-grail"> <header> <h1>header</h1> </header> <div class="holy-grail-body"> <main class="holy-grail-content"> <header class="holy-grail-content-header">content header</header> <div class="content">test lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. lorem ipsum dolor sit amet, consectetur adipisicing elit. animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam. testend </div> </main> <nav class="holy-grail-nav"> <h2>navigation</h2> </nav> <aside class="holy-grail-sidebar"> <h2>sidebar</h2> </aside> </div> <footer> <h2>footer</h2> </footer> </body> </html>
Comments
Post a Comment