Reputation: 3282
I have a div that should be between two elements: A header and a footer. This div is a side menu and it needs to be fixed with 100% height that way however the user scrolls, it will always follow them. However, I cannot get the menu to be between the header and footer. It will go on top of the footer and header. I don't want to use z-index: 0, because the side menu will contain items. I need it to start at the end of the header and beginning of the footer. Also, I chose static heights here, but the real world example has auto heights for footer and header. Here's how it looks like now: https://jsfiddle.net/kt29L1ef/
body {
margin: 0;
}
.header {
width: 100%;
height: 250px;
background-color: red;
}
.menu {
height: 100%;
width: 70px;
position: fixed;
z-index: 0;
left: 0;
top: 0;
background-color: #222;
overflow-x: hidden;
box-shadow: 0.2rem 1px 5px 0 rgba(0, 0, 0, 0.3);
}
.footer {
width: 100%;
height: 250px;
background-color: blue;
}
<div class="header">
</div>
<div class="menu">
</div>
<div class="footer">
</div>
Upvotes: 2
Views: 69
Reputation: 19119
I found this question rather intriguing. The cool, weird thing about a fixed
position element is how it behaves when you don't specify a positioning property (top
, bottom
, etc.). It remains statically positioned (but fixed to that position), which happens to be just where we want it. Using that knowledge, and adding some flexbox into the mix, I think I achieved what you're looking for. Since I couldn't explicitly extend the height of thte fixed
menu, I used its full height parent container to house the background color, making it appear as if it belongs to the menu.
Demo notes:
.header
and .footer
short, but their height is irrelevant. The main
element will always consume the most available spacebody {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
width: 100%;
height: 50px;
background-color: red;
}
main {
flex-grow: 1;
display: flex;
}
.fixed {
padding-left: .75em;
flex: 2.8;
background-color: #222;
box-shadow: 0.2rem 1px 5px 0 rgba(0, 0, 0, 0.3);
}
.content {
flex: 10;
padding-left: 1.3em;
}
.menu {
color: white;
position: fixed;
z-index: 0;
overflow-x: hidden;
}
.footer {
width: 100%;
height: 50px;
background-color: blue;
}
<div class="container">
<div class="header"></div>
<main>
<div class="fixed">
<div class="menu">
<h2>Menu</h2>
<nav>
<ul>
<li>one</li>
<li>two</li>
</ul>
</nav>
</div>
</div>
<div class="content">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nostrum mollitia ea ut debitis natus, hic rem quo et harum dignissimos error alias saepe vitae doloribus dicta repellat illo repudiandae!</span></p>
<p><span>Quisquam ut unde, dolorum id vero autem cumque fuga quos. Natus fuga consequuntur odit, officiis velit sequi nisi. Vel nam est, at laborum dignissimos. Accusamus nulla sint enim officia tenetur?</span>
<span>Labore quas dolores, quisquam impedit rerum, ipsam earum, voluptates dolorem delectus sequi architecto cupiditate eum quasi, amet officia totam tenetur provident iure repellat ex eligendi repudiandae a! Minima, nulla minus.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nostrum mollitia ea ut debitis natus, hic rem quo et harum dignissimos error alias saepe vitae doloribus dicta repellat illo repudiandae!</span>
<span>Quisquam ut unde, dolorum id vero autem cumque fuga quos. Natus fuga consequuntur odit, officiis velit sequi nisi. Vel nam est, at laborum dignissimos. Accusamus nulla sint enim officia tenetur?</span>
<span>Labore quas dolores, quisquam impedit rerum, ipsam earum, voluptates dolorem delectus sequi architecto cupiditate eum quasi, amet officia totam tenetur provident iure repellat ex eligendi repudiandae a! Minima, nulla minus.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nostrum mollitia ea ut debitis natus, hic rem quo et harum dignissimos error alias saepe vitae doloribus dicta repellat illo repudiandae!</span>
<span>Quisquam ut unde, dolorum id vero autem cumque fuga quos. Natus fuga consequuntur odit, officiis velit sequi nisi. Vel nam est, at laborum dignissimos. Accusamus nulla sint enim officia tenetur?</span>
<span>Labore quas dolores, quisquam impedit rerum, ipsam earum, voluptates dolorem delectus sequi architecto cupiditate eum quasi, amet officia totam tenetur provident iure repellat ex eligendi repudiandae a! Minima, nulla minus.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nostrum mollitia ea ut debitis natus, hic rem quo et harum dignissimos error alias saepe vitae doloribus dicta repellat illo repudiandae!</span>
<span>Quisquam ut unde, dolorum id vero autem cumque fuga quos. Natus fuga consequuntur odit, officiis velit sequi nisi. Vel nam est, at laborum dignissimos. Accusamus nulla sint enim officia tenetur?</span>
<span>Labore quas dolores, quisquam impedit rerum, ipsam earum, voluptates dolorem delectus sequi architecto cupiditate eum quasi, amet officia totam tenetur provident iure repellat ex eligendi repudiandae a! Minima, nulla minus.</span></p>
</div>
</main>
<div class="footer"></div>
</div>
Upvotes: 1