Positioning scrollable content under fixed flexbox navigation menu
I have made same result (correct me, if I'm wrong), but without js. And it seems, that whatever header height is considered by content below.
The main idea - not to wrap <header> and to apply to it position: sticky, z-index also not necessary.
I didn't use exactly your code, but tried to repeat the result. Hope you will find some useful ideas for your problem.
Some answers' code when screen width is small and toggle the menu, it pushs down main content. My code doesn't contain that issue.
* { margin: 0;} @media (min-width: 48rem) { :root { font-size: calc(1rem + ((1vw - .48rem) * 1.389)); }} body { background: #eee; font-family: "HelveticaNeue-Light", Arial; height: auto !important; }
header { width: 100%; position: sticky; top: 0; box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);}
.wrapper { position: relative; background-color: rgba(0, 0, 0, .15);}
#navToggle { display: inline-block; height: 2.6rem;}
#navToggle > a { color: rgba(255, 255, 255, .85); display: block; font-size: 0.85em; font-weight: 600; padding: 0 2.5rem; text-decoration: none; transition: all 300ms ease; padding-top: .9rem;}
#navToggle:hover + #bottom-container, #bottom-container:hover { visibility: visible; opacity: 1; transition: all 0.2s ease-in-out;}
#bottom-container { background-color: rgb(250, 209, 14); width: 100%; visibility: hidden; opacity: 0; position: absolute; top: 100%; left: 0;}
#bottom-container > nav ul { margin: 0; padding: 0; list-style-type: none;}
#bottom-container > nav > ul { display: flex; flex-direction: column; flex: 1; align-items: center;}
#bottom-container > nav > ul li { display: flex; justify-content: center; width: 100%;
}
#bottom-container nav > ul > li > a { display: block; color: rgba(0, 0, 0, .65); padding: 1.3rem 0; text-decoration: none;}
.sub1 { position: relative;}
.sub1 > nav { position: absolute; top: 100%; left: 0; visibility: hidden; opacity: 0; background-color: rgb(250, 250, 250); width: 100%; transition: all 0.2s ease-in-out;}
.sub1 > nav ul li { text-align: center;}
.sub1 > a:hover + nav, .sub1 > a + nav:hover { visibility: visible; opacity: 1; transition: all 0.2s ease-in-out;}
#bottom-container nav>ul>li>a span.toggle { background-color: rgba(0, 0, 0, .05); color: rgba(0, 0, 0, .25); padding: 2px 8px;}
main { height:4000px;}
@media (min-width: 751px){ #bottom-container > nav > ul { flex-direction: row; height: 3rem; } #bottom-container nav>ul>li>a span.toggle { display: none; } #bottom-container { height: 100%; border-top: calc(5vh + 2vw) solid yellow; visibility: visible; opacity: 1; position: static; }
#navToggle { display: none; }}<!doctype html>
<html lang="en">
<head> <meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body> <header> <div class="wrapper"> <div id="navToggle"><a href="#">Menu</a></div> <div id='bottom-container'> <nav> <ul> <li><a href="#">ITEM ONE</a></li> <li class="sub1"> <a href="#">ITEM TWO <span class="toggle">Expand</span></a> <nav> <ul> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li><a href="#">Sub Item 3</a></li> <li><a href="#">Sub Item 4</a></li> </ul> </nav> <li><a href="#">ITEM THREE</a></li> </ul> </nav> </div> </div> </header>
<main> <p>content top not visible but should be able to see</P> <p>line 1</P> <p>line 2</P> <p>line 3</P> <p>line 4</P> <p>line 5</P> <p>line 6</P> <p>line 7</P> <p>line 8</P> <p>line 9</P> <p>line 10</P> <p>line 11</P> <p>line 12</P> <p>line 13</P> <p>line 14</P> <p>line 15</P> <p>line 16</P> <p>line 17</P> <p>line 18</P> <p>line 19</P> <p>line 20</P> </main></body>
</html>Layout with sticky sidebar on the left and scrollable content on the right
You could do it like in my snippet below. Both columns have height: 100%;, the right one has overflow-y: auto to show a scrollbar only if necessary and scroll the contents inside that column:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
.row {
display: flex;
height: 100%;
background-color: #33a8ff;
}
.column {
flex: 50%;
padding: 16px;
}
.one {
background-color: tomato;
height: 100%;
}
.two {
height: 100%;
overflow-y: auto;
}<div class="row">
<div class="column one">
<h2> column #1 </h2>
<p>menu items</p>
</div>
<div class="column two">
<h2>column #2</h2>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
<p> Some contents in column 2 </p>
</div>
</div>HTML/CSS style for having on fixed navbar two fixed sidebars and scrollable content with scrollbar at right of screen
I think with what you are trying to accomplish that using position: sticky; is your best bet. It's would be a challenge to get the scrollbar on the body and still have the fixed positioning of your sidebars. What I would do is set sticky on sidebars then use top: 0; to get them in place.
The only downfall to this solution (which is standard behavior) is that as soon as you reach the bottom of the scrollable content in content the sidebar's scrolls slightly. I added more content so you can see what I am referring to. This could be solved by setting a fixed 100vh container that contains all of this code and cannot be scrollable, then creating a scroll within that. You can also use js.
body {
width: 100%;
overflow-y: auto;
margin: 0;
}
.navbar {
height: 10%;
width: 100%;
background: rgb(51, 204, 51);
position: fixed;
z-index: 999;
}
.dashboard {
display: flex;
top: 10%;
height: 90%;
width: 100%;
position: fixed;
overflow-y: auto;
}
.sidebar {
border-right: 1px solid #ededed;
background: #36c;
flex: 1 0 10%;
padding: 1rem;
height: 100%;
width: 10%;
}
.one {
position: sticky;
width: 10%;
top: 0;
overflow: hidden;
}
.two {
position: sticky;
width: 10%;
right: 0;
top: 0;
overflow: hidden;
}
.content {
flex: 5;
width: 80%;
display: inline-block;
}
.data {
font-size: 50px;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="app.css" />
</head>
<body>
<div class="navbar">navbar</div>
<div class="dashboard">
<div class="sidebar one">sticky sidebar one</div>
<div class="content">
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
<div class="data">a</div>
</div>
<div class="sidebar two">sticky sidebar two</div>
</div>
</body>
</html>Fixed menu on left and content scrollable
Quick one from me, check it out. You should at least have tried yourself, but I wasn't doing much so that's why I made something.
HTML:
<div id="left">Side menu</div>
<div id="right">Scroll
<br />Scroll
<br />Scroll
</div>
CSS:
html, body {
height: 100%;
margin: 0;
font-size: 20px;
}
#left {
width: 20%;
height: 100%;
position: fixed;
outline: 1px solid;
background: red;
}
#right {
width: 80%;
height: auto;
outline: 1px solid;
position: absolute;
right: 0;
background: blue;
}
DEMO HERE
CSS layout with header (fixed), body split in menu (scrollable) and content (scrollable), footer (fixed)
If you can fix the width of your left column then you can use absolute positioning on your middle divs to get the overflow you want:
html,
body {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.body {
flex-grow: 1;
width: 100%;
display: flex;
}
.body .menu {
width: 200px;
}
.body .content {
flex: 1;
}
.scroll-holder {
position: relative;
}
.scroll {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
}
.test {
height: 1000px;
}<div class="wrapper">
<div class="header">header</div>
<div class="body">
<div class="menu scroll-holder">
<div class="scroll">
<ul>
<!-- duplicate this as many times as needed to verify scrolling behavior -->
<li class="test">Menu Item</li>
<li>Menu Item</li>
</ul>
</div>
</div>
<div class="content scroll-holder">
<div class="scroll">
<ul>
<!-- duplicate this as many times as needed to verify scrolling behavior -->
<li class="test">Content Item</li>
<li>Content Item</li>
</ul>
</div>
</div>
</div>
<div class="footer">footer</div>
</div>Related Topics
Add a State Property to an Inline Style in React
What Is the Third Value in CSS Padding
Make Div as Wide as It Needs to Be
Disappearing Position Fixed Header in iOS7 Mobile Safari
Css: Semi-Transparent Background and an Image
What Is the Meaning of the "@Include" in .CSS Files
Is There a Trick to Show Arial Black in Firefox
Setting an Input Box Background
How to Detect Lack of Position:Fixed in a Generic Way
Internet Explorer Automatically Switches to Compatibility Mode (IE9 and Ie10)
How to Set Multiple CSS Style Properties in Typescript for an Element
Css: How to Center a Horizontal List? Display:Inline Not Working
Package for Showing All Possible CSS Values in Sublime Text 2
What Does the Inherit Keyword in CSS Do