Question:
I have a layout with a fixed menu on the left, the page content taking up the rest of the space and a fixed footer:
* {
margin: 0;
padding: 0;
text-align: center;
}
nav {
z-index: 2;
width: 25%;
height: 100vh;
background-color: red;
position: fixed;
}
main {
z-index: 1;
width: 75%;
margin-left: 25%;
height: 100vh;
background-color: green;
margin-bottom: 200px;
}
footer {
z-index: -1;
width: 100%;
height: 200px;
background-color: blue;
position: fixed;
bottom: 0;
}<nav> MENU </nav>
<main> CONTEÚDO </main>
<footer> RODAPÉ </footer>Fixed footer is for the effect of stopped text when scrolling
Is it possible (preferably with CSS only) to make the footer overlap the menu, but only at the bottom of the page? so:
* {
margin: 0;
padding: 0;
text-align: center;
}
nav {
z-index: -1;
width: 25%;
height: 100vh;
background-color: red;
position: fixed;
}
main {
z-index: 1;
width: 75%;
margin-left: 25%;
height: 100vh;
background-color: green;
margin-bottom: 200px;
}
footer {
z-index: 2;
width: 100%;
height: 200px;
background-color: blue;
position: fixed;
bottom: 0;
}<nav> MENU </nav>
<main> CONTEÚDO </main>
<footer> RODAPÉ </footer>Detail, the menu must have the z-index greater than the content due to shadows
Answer:
This option has a slightly different HTML structure than yours. And the background is actually in main , done with a linear-gradiente to "split" the layout into two columns. If the main content does not occupy the entire screen, the footer is displayed. But if the content is extensive, the footer is only revealed when the content ends. For that I used the heigth of the main in this way min-height: calc(100vh - 200px);
Here in the Snippet it doesn't look so cool because the footer is exactly the same height as the snippet , but there will hardly be a situation that will bug like this, only if your menu is very extensive and the screen height is very narrow.
To understand better, see the example: Display in Full Screen for a better result
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
footer {
z-index: -1;
width: 100%;
height: 200px;
background-image: url(https://www.placecage.com/200/200);
background-size: cover;
position: fixed;
bottom: 0;
}
main {
display: flex;
margin-bottom: 200px;
background-image: linear-gradient(to right, #ddd 0, #ddd 25%, #333 25%, #fff 26%, #fff 100%);
min-height: calc(100vh - 200px);
}
section {
margin-left: 25%;
height: 200vh;
}
nav {
width: 25%;
position: fixed;
}<main>
<nav>
menu
</nav>
<section>
<h1>conteúdo</h1>
</section>
</main>
<footer>footer</footer>This option is not layout dependent. It just depends that your menu has only one background color…
The trick here is to detach the menu from its background color… Like this, the menu will remain fixed, but with a transparent background! The background is actually another div , this div in turn works like main and goes up on the scroll . So the menu is always fixed, but the "whole background" is free to go up revealing the footer .
But if the page scroll is too big, the background will disappear behind the menu . Then I'll tell you the second option that is just below… But there are also some caveats that I'll talk about below.
OBS: You can make the shadow with linear gradiente in main to make the "shadow" and not a drop-shadow in the menu above the main . You can use the background-attachment: fixed; in case you want to set the menu pseudo-background when scrolling .
See how it looks:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
text-align: center;
}
nav {
z-index: 2;
width: 25%;
height: 100vh;
background-color: transparent;
position: fixed;
}
.debugg {
z-index: 1;
width: 25%;
margin-left: 0;
height: 100vh;
/* background-color: red; */
margin-bottom: 200px;
float: left;
background-image: url(https://placecage.com/200/600);
background-size: cover;
background-attachment: fixed;
}
main {
z-index: 1;
width: 75%;
margin-left: 25%;
height: 100vh;
margin-bottom: 200px;
background-image: linear-gradient(to right, #999 0, #ddd 16px, #ddd 100%);
}
footer {
z-index: -1;
width: 100%;
height: 200px;
background-image: url(https://placecage.com/500/200);
background-size: cover;
position: fixed;
bottom: 0;
}<nav> MENU </nav>
<div class="debugg"></div>
<main> CONTEÚDO </main>
<footer> RODAPÉ </footer>Option depending on layout
With CSS depending on the design of your layout you can create a pseudo element that will be attached to Main and will go up on top of the Menu when you scroll . However, the blue you see covering the menu is not the footer , it is this element is the after of the main rising, giving the impression that it is the footer appearing 🙂
That's why I made the observation saying that it will depend a lot on the design of your page…
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
text-align: center;
}
nav {
z-index: 2;
width: 25%;
height: 100vh;
background-color: red;
position: fixed;
}
main {
z-index: 1;
width: 75%;
margin-left: 25%;
height: 100vh;
background-color: green;
margin-bottom: 200px;
}
footer {
z-index: -1;
width: 100%;
height: 200px;
background-color: blue;
position: fixed;
bottom: 0;
}
main::after {
content: "";
z-index: 20;
width: 25%;
height: 200px;
background-color: blue;
position: absolute;
left: 0;
top: 100%;
}<nav> MENU </nav>
<main> CONTEÚDO </main>
<footer> RODAPÉ </footer>