I've got sections that slide up over the header.
But I need the last section to reveal the footer.
It is possible to reveal the footer without JavaScript in a situation like this?
html,
body,
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
height: 100%;
margin-top: 300px;
margin-bottom: 300px;
}
.header {
height: 100vh;
background: tomato;
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
.section1,
.section2,
.section3 {
height: 100vh;
z-index: 10;
position: relative;
}
.section1 {
background: orange;
}
.section2 {
background: purple;
}
.section3 {
background: red;
}
.footer {
height: 10vh;
position: fixed;
bottom: 0;
width: 100%;
background: aquamarine;
}
<div class="container">
<div class="header">
header
</div>
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
</div>
<div class="footer">
footer
</div>
View on JS Bin
The reason your footer isn't showing up is because it has a lower z-index than the other sections. However, if you give your .footer class a higher z-index than the other sections, it will always show at the bottom because it has the style position: fixed.
One possible solution would be to give the footer the same z-index as the other sections, change its position to relative, and include it inside your .container class.
This would look like:
html,
body,
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
height: 100%;
margin-top: 300px;
margin-bottom: 300px;
}
.header {
height: 100vh;
background: tomato;
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
.section1,
.section2,
.section3,
.footer {
height: 100vh;
z-index: 10;
position: relative;
}
.section1 {
background: orange;
}
.section2 {
background: purple;
}
.section3 {
background: red;
}
.footer {
height: 10vh;
position: relative;
bottom: 0;
width: 100%;
background: aquamarine;
}
<div class="container">
<div class="header">
header
</div>
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
<div class="footer">
footer
</div>
</div>
JS Bin
Try putting :
z-index: 11;
Because you have z-index in the other container that's why you can't see the footer
You might consider using position:sticky.
A stickily positioned element is an element whose computed position
value is sticky. It's treated as relatively positioned until its
containing block crosses a specified threshold (such as setting top to
value other than auto) within its flow root (or the container it
scrolls within), at which point it is treated as "stuck" until meeting
the opposite edge of its containing block.
However, consider the browser compatibility.
At the time of this post, IE doesn't support "sticky" positioning.
Here's a demonstration:
body {
margin: 0;
}
.header {
position:-webkit-sticky;
position: sticky;
background: tomato;
height: 100vh;
top: 0;
}
.section1,
.section2,
.section3 {
height: 100vh;
position: relative;
}
.section1 {
background: orange;
}
.section2 {
background: purple;
}
.section3 {
background: red;
}
.footer {
position:relative;
height: 10vh;
background: aquamarine;
}
<div class="header">
header
</div>
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
<div class="footer">
footer
</div>
Related
I am trying to have a header/footer and a scrollable div#middle. Within the scrollable div, another (inner) footer div#middle-bottom should be placed at the bottom of div#used-for-swipe-animation and always be visible.
This is my current code using flex-container (using flex is not a requirement):
html, body {
margin: 0
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
overflow-y: auto;
}
.top {
background: lightgreen;
}
.middle {
flex-grow: 1;
overflow: auto;
}
.middle-bottom {
background: red;
}
.bottom {
background: lightblue;
}
<body>
<div class="wrapper">
<div class="top">top</div>
<div id="used-for-swipe-animation">
<div class="middle">
middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle
</div>
<div class="middle-bottom">
middle-bottom<br>middle-bottom<br>middle-bottom<br>middle-bottom<br>
</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
Problem: Without the div#used-for-swipe-animation it works as expected. However, as the id suggests, div#used-for-swipe-animation is needed to perform some animation.
Nice-to-Have: Is it possible to have the scrollbar of div#middle to be displayed over full height of div#wrapper?
As per I understand your Que, you need fixed Header & Footer and scroll div in middle
html,
body {
margin: 0
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
overflow-y: auto;
}
.top {
position: fixed;
top: 0;
width: 100%;
height: 30px;
background: lightgreen;
}
.main_center {
margin: 30px 0;
}
.middle {
flex-grow: 1;
overflow: auto;
}
.middle-bottom {
background: red;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
background: lightblue;
}
<body>
<div class="wrapper">
<div class="top">top</div>
<div id="used-for-swipe-animation" class="main_center">
<div class="middle">
middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle
</div>
<div class="middle-bottom">
middle-bottom<br>middle-bottom<br>middle-bottom<br>middle-bottom<br>
</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
Replay can lead perfection :)
I am wondering, if there are any alternative/better ways to create this dashboard layout with flex or maybe grid? So I wouldn't need to add this pusher with 200px margin.
I heard about that it can be done using flex 1 1 0% or something like that, I am not sure how to implement it.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 200px;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
background: blue;
flex: 1;
height: 100vh;
}
.pusher {
margin-right: 200px;
}
.nav{
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="pusher">
</div>
<div class="body">
<div class="nav">
Nav
</div>
test
</div>
</div>
Here you go...
I removed the div with class="pusher" and changed/added the CSS as follows:
.sidebar {
width: 20vw;
}
.body {
position: absolute;
width: 80vw;
right: 0;
}
Basically, I made the div class="sidebar" and the div with class="body" make up to 100 % of the screen but in different relative units, i.e. vw (20 vw + 80 vw = 100 vw). So, now I just needed to add right: 0; to the div with class="body" in order to achieve the exact same result as you did with margin-right: 200px;. I also added position: absolute; to the div with class="body", otherwise it won't work.
See the snippet below.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 20vw;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
position: absolute;
background: blue;
height: 100vh;
width: 80vw;
right: 0;
}
.nav {
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="body">
<div class="nav">Nav</div>
<div>test</div>
</div>
</div>
Hi I change your HTML and CSS code and I do my best for you.
HTML CODE:
<div class="main">
<div class="sidebar">This is Sidebar</div>
<div class="content">
<div class="nav">
Nav
</div>
<div class="content-body">
test
</div>
</div>
</div>
CSS Code:
body {
margin: 0;
}
.main{
display: flex;
width: 100vw;
}
.sidebar {
left: 0;
width: 200px;
background: red;
height: 100vh;
}
.content {
display: flex;
flex-direction: column;
width: 100vw;
background: #ddd;
height: 100vh;
}
.nav{
background: yellow;
height: 60px;
}
.content-body {
background: blue;
height: 100vh;
}
I have a project that contains a header. This header consists of a certain background color and text color. These colors aren't going well with one part of the website. So I want to transition the header to different colors. But I want the colors to change gradually at the border and not swap immediately.
The headers should transition from one color to the other at the border of the container when entering and leaving. But I don't seem to get this to work.
body {
height: 300rem;
margin: 0;
padding: 0;
}
#main-container {
width: 100%;
height: 100%;
background-color: red;
}
#header {
width: 100%;
height: 2rem;
background-color: blue;
position: sticky;
top: 0;
}
#someDiv {
position: relative;
width: 100%;
height: 20rem;
background-color: purple;
margin-top: 30rem;
}
#headerSomeDiv {
width: 100%;
height: 2rem;
background-color: green;
color: white;
position: sticky;
top: 0;
}
<body>
<div id="main-container">
<div id="header">
<h1>HEADER</h1>
</div>
<div id="someDiv">
<div id="headerSomeDiv">
<h1>HEADER</h1>
</div>
</div>
</div>
</body>
position:fixed can do this
body {
height: 300rem;
margin: 0;
}
#main-container {
height: 100%;
background-color: red;
clip-path:inset(0); /* to clip the position:fixed to its container */
overflow:auto;
}
#header,
#headerSomeDiv{
width: 100%;
height: 2rem;
background-color: blue;
position: fixed;
top: 0;
}
#headerSomeDiv {
background-color: green;
color: white;
}
h1 {
margin:0;
}
#someDiv {
position: relative;
height: 20rem;
background-color: purple;
margin-top: 30rem;
clip-path:inset(0); /* to clip the position:fixed to its container */
}
<body>
<div id="main-container">
<div id="header">
<h1>HEADER</h1>
</div>
<div id="someDiv">
<div id="headerSomeDiv">
<h1>HEADER</h1>
</div>
</div>
</div>
</body>
My goal was to get the footer to stay at the bottom of the page and to go further down when more content is added. In doing so, a div element on my page which follows the footer has stopped half way when there isn't enough content.
My question is, how do you get the middle-stripdiv to stretch to the footer and have the goal above still achievable.
Here is a simplified JSFiddle to show the issue.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #283343;
height: 50px;
}
#middle-strip {
padding-bottom: 100px;
background: #32cd32;
width: 500px;
margin: auto;
}
#content-area {
width: 400px;
height: 100%;
margin: auto;
}
#footer {
background: #283343;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
<div id="container">
<div id="header">
THIS IS THE HEADER
</div>
<div id="middle-strip">
<div id="content-area">
THIS IS WHERE THE CONTENT WILL GO
</div>
</div>
<div id="footer">
THIS IS THE FOOTER
</div>
</div>
You can use flexbox to achieve this:
#container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#middle-strip {
flex: 1;
}
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
I have this html page structure used for different pages:
<div class="conteiner">
<div class="header">green</div>
<div class="fit_on_content">red<br />red</div>
<div class="fit_all">aqua</div>
<div class="footer">yellow</div>
</div>
with this css
.conteiner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: aquamarine;
}
.header {
position: relative;
top: 0;
height: 50px;
width: 100%;
background-color: green;
}
.fit_on_content {
position: relative;
display: table;
margin: 0 auto;
background-color: red;
}
.fit_all {
background-color: aqua;
????
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: yellow;
}
.header is positioned to the top.
.footer is positioned to the bottom.
.fit_on_content is positioned under header and has the height of the content that may change from page to page.
.fit_all is positioned under fit_on_content and must extend to the footer.
Any idea please?
Thanks
Here is a way using display: table
html,
body { height: 100%; margin: 0 }
.container {
display: table;
width: 100%;
height: 100%;
}
.page-row {
display: table-row;
height: 1px;
}
.page-row-expanded {
height: 100%;
}
header {
background-color: #bbb;
height: 50px;
}
main {
background-color: #ddd;
}
main ~ main {
background-color: #fff;
}
footer {
background-color: #bbb;
height: 50px;
}
<div class="container">
<header class="page-row">
Header
</header>
<main class="page-row">
First content goes here
</main>
<main class="page-row page-row-expanded">
Second content goes here
</main>
<footer class="page-row">
Copyright, blah blah blah
</footer>
</div>
Updated as requested, using display: flex;
Note though, you need to add the prefixed properties for browsers that doesn't support flex unprefixed.
html,
body { height: 100%; margin: 0 }
.container {
display: flex;
flex-flow: column;
width: 100%;
height: 100%;
}
.page-row {
flex: 0 0 auto;
}
.page-row-expanded {
flex: 1 0 auto;
height: 0;
}
header {
background-color: #bbb;
height: 50px;
}
main {
background-color: #ddd;
}
main ~ main {
background-color: #fff;
}
footer {
background-color: #bbb;
height: 50px;
}
<div class="container">
<header class="page-row">
Header
</header>
<main class="page-row">
First content goes here
</main>
<main class="page-row page-row-expanded">
Second content goes here
</main>
<footer class="page-row">
Copyright, blah blah blah
</footer>
</div>