Here is the link to codesandbox where I am trying to add a footer but the content above it gets hidden. How can I fix this? What is the mistake I am doing?
The footer component is commented in the app.js file. Scroll to the bottom and see the content and if you uncomment the footer, it will hide the content.
https://codesandbox.io/s/rk4kl
The main problem is using the position property in the wrong place.
the position property is good especially when you're considering boxes.
in your styles.css
.App {
font-family: sans-serif;
height: 100%;
position: relative;
}
.footer {
position: absolute;
min-height: 2rem;
width: 100%;
text-align: center;
bottom: 0;
}
.flex {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}
change it into
.App {
font-family: sans-serif;
min-height: 100vh;
}
.footer {
min-height: 2vh;
width: 100%;
text-align: center;
}
.flex {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
min-height: 90vh;
}
Explanation:
The main idea is that for keeping the footer always have to split the viewport into separate ratios. So that they can always stay with that ratio irrespective of the content.
here the div with className App have a min-height of 100vh, which means when we split the viewport into 100 pieces div with App occupies a minimum of 100 slices. Now inside App, we have the flex and footer. We give flex a minimum of 90 pieces and a footer of a minimum of 2. so the footer will always keep in the bottom now.
here is the updated result
I think you are searching for some "Sticky Footer" Solutions, if your Content is not long enough, the footer should be at the end of the page.
You could give a margin-top - footer height.
html, body {
height: 100%;
margin: 0;
}
.content {
background-color: blue;
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
background-color: yellow;
height: 50px;
margin-top: -50px;
}
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer">Here comes the Footer</footer>
</body>
Just change position: absolute; to position: relative;
.footer {
position: relative;
min-height: 2rem;
width: 100%;
text-align: center;
bottom: 0;
}
Use from position static instead absolute for .footer.
When you use position: absolute for an element, it may be placed over other elements. because:
Absolute positioned elements are removed from the normal flow and can overlap elements.
From: https://www.w3schools.com/css/css_positioning.asp
Just remove position "absolute" or add position "relative" to it.
.footer {
position: relative;
min-height: 2rem;
width: 100%;
text-align: center;
bottom: 0;
}
Related
I am trying to set a footer at the bottom of the page for each HTML page.
On my main index page, it sets at the bottom because I have several sections on the page, which includes a block of text and a video sitting side by side above the footer.
On another HTML page I just have my navigation bar and the footer styled. The main tag has no content. The footer on this page is half way up the screen.
I've looked through different solutions and have tried bottom: 0 as well as position: fixed and position: absolute, but absolute just causes the footer on my main page to cover up the horizontal line between the text/video section and the footer, and the very bottom part of the video and text. Fixed causes it to sit over all the content and at the bottom of the page does the same as absolute.
.about {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 50%;
font-size: 1.5em;
float: left;
height: 50vh;
margin-top: 3em;
left: 0;
margin-bottom: 3em;
}
.videos {
width: 50%;
height: 50vh;
float: left;
margin-top: 3em;
right: 0;
margin-bottom: 3em;
}
.frontPageVideo {
width: 95%;
height: 100%;
}
footer {
clear: both;
background-color: rgb(0, 0, 0);
height: 20vh;
margin-top: 5em;
}
How can I set the footer at the bottom of every page?
Give your body a min-height: 100vh css rule to ensure your page is never shorter than the viewport.
You might also consider using flex to establish the header/main/footer layout.
body {
margin: 0;
}
.main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main > * {
flex: 1 1 auto;
background: bisque;
}
.main header,
.main footer {
flex: 0 0 30px;
background: tomato;
}
<div class="main">
<header>Header</header>
<div>Content</div>
<footer>Footer</footer>
</div>
In addition to the answer by Ray Hatfield, I would also add it to the html element. Here is what I always include in my websites:
html, body{
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}
I have a simple HTML document with a height of 100vh. The element contains a title. Now when I scroll nothing happens as expected. What I need is an effect that the page stays the same and my title is scrolling up and out of the viewport. How can I achieve that?
My code simplified:
html,
body {
margin: 0;
padding: 0;
}
#wrapper {
background-color: red;
height: 100vh;
width: 100%;
}
h1 {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<h1>Title</h1>
</div>
You can do it the opposite way - not fixing the to-be-scrolled element, but the contents element which you put into the background by using a negative z-index:
Apply position:fixed to the wrapper and move it to the background with z-index: -1. Erase position: absolute from the h1 to reset its position to static to allow it to scroll.
For the scrolling to be possible, you either need enough height for the title element (at least 150% or more), or another (possibly invisible) element that follows afterwards, like in my example below.
The text centering inside h1 can be done via flex (see below).
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
position: fixed;
z-index: -1;
background-color: red;
height: 100vh;
width: 100%;
}
h1 {
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin: 0;
}
.something_else {
height: 100%;
}
<div id="wrapper"> wrapper contents here... </div>
<h1>Title</h1>
<div class="something_else"></div>
I can't find a solution to this issue. I would like to have a footer that's always at the bottom (not sticky/fixed), and also a background that's always at the bottom (not sticky/fixed).
I made a picture to make it more clear: https://i.imgur.com/qVLb1bl.png
<html>
<div id="container">
<div class="content">
<h1>Content</h1>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>
</html>
CSS:
html, body { height: 100%; }
body { display: flex; flex-direction: column; background: url('http://www.freetoursbyfoot.com/wp-content/uploads/2013/08/New-York-Skyline-Downdown-view.jpg') no-repeat bottom center; }
#container { display: flex; flex-direction: column; height: 100%; }
.content { max-width: 800px; width: 100%; height: 400px; margin: 0 auto; background: #eee; margin-top: 20px; text-align: center; padding-top: 30px; }
.footer { max-width: 800px; width: 100%; height: 100px; background: #000; margin: auto auto 0 auto; }
I also made a codepen: https://codepen.io/nickm10/pen/XVJjGb
Anyone know the solution?
Thanks!
Since you are already using flexbox layout. There is something called as flex-grow (The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container).
Just give:
.content{
-webkit-flex-grow: 1;
flex-grow: 1;
/** remove height **/
}
and remove height from .content.
Specify the decire height of the html page. Else the page is high enough to fit all of ur element;
html, body { height: 1000px; }
Use min-height: 100%; for html and body instead of height: 100%;
Updated answer:
html height should be set as min-height so it can grow when needed. But thanks to this body does not know the theight of parent (html) element and so we can't use % based min-height there anymore.
Thankfully we have viewport units. So for body set min-height: 100vh; This tells body to be minimally 100% of viewports height.
html { min-height: 100%; }
body { min-height: 100vh; margin: 0; }
PS! You also need to remove margin from body with this solution. Or there will be a scrollbar visible always.
Put background in body pseudo element and align it there.
body {
...
position: relative;
min-height: 100%;
...
}
body::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: url("http://www.freetoursbyfoot.com/wp-content/uploads/2013/08/New-York-Skyline-Downdown-view.jpg")
no-repeat bottom center;
pointer-events: none;
z-index: -1;
}
Here is a codepen: codepen.io/anon/pen/vpEgxo
Hope this will help ;)
First of all, please read this whole question so you can fully understand what i am looking for, Thanks!
This is a question i have been trying to research for a great time now, and has stumped me for quit a while. Can i have a true sticky footer with a fixed header?
How can i implement a sticky footer with a fixed header? I can't add padding or a margin to the body or content, since that will break the footer. Also, i want to be able to use width:100% and height: 100% inside my content without it overflowing and creating a mess.
Here is what i am aiming for (Please excuse my great Photoshop skills) :
This look good, when i use position:fixed; and bottom:0; on my footer. But to make it truly sticky, i need to add some css to my page. (from : http://css-tricks.com/snippets/css/sticky-footer/)
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}
This allows me to have a GREAT looking sticky footer, but here is the problem. Some of the content is underneath my fixed navigation bar.
I can't add padding or a margin to the body, html, OR the content, because that will make the sticky footer mess up. Is there any way i can do this without CSS "Hacks"?
This is with the content under the header: http://jsfiddle.net/g2ydV/3/
Looks good right!, but some of the content is hidden under the header? Lets fix that by adding a margin to the content: http://jsfiddle.net/g2ydV/2/
The above example works, BUT the footer is messed up. How can i achieve this effect without messing up my sticky footer?
One potential solution is to swap your content:after to content:before.
Working Demo
CSS:
/* .content:after {
content: "";
display: block;
} */
.content:before {
content: "";
display: block;
height: 45px;
}
There's an alternative way of doing this using display: table; and display: table-cell which seems to be becoming increasingly popular.
I'm just offering it up as an alternative worth having a look at. It's quite clean and doesn't require any defined heights for the header and footer which is nice.
HTML
<div id="wrap">
<div id="wrap-inner">
<div class="navbar">
<span>Fixed Header (content under here)</span>
</div>
<div class="content">
<p>Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer</p>
</div>
<div class="footer">
<span>Sticky footer!</span>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
body {
margin: 0;
}
#wrap {
display: table;
width: 100%;
height: 100%;
min-height: 100%;
}
#wrap-inner {
vertical-align: middle; /* optional for positioning content in the middle */
display: table-cell;
}
.navbar, .footer {
position: fixed;
width: 100%;
}
.navbar {
top: 0;
width: 100%;
}
.footer {
bottom: 0;
}
Demo
it's my decision for fixed header
html {
position: relative;
min-height: 100%;
}
#main-container {
padding-top: 55px; /* this is header height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
body {
margin: 0;
padding:0;
line-height: normal;
height: 100%;
overflow: hidden;
}
.header {
background:#3d5084;
padding: 16px 0 16px 30px;
display: flex;
align-items: center;
justify-content: center;
}
.main-middle-container {
padding: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
height: calc(100vh - 150px);
flex-direction: column;
overflow: hidden;
overflow-y: auto;
background: #f1f1f1;
}
.footer {
background: #3d5084;
padding: 11px 25px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
position: relative;
z-index: 1;
}
Demo link
First of all, please read this whole question so you can fully understand what i am looking for, Thanks!
This is a question i have been trying to research for a great time now, and has stumped me for quit a while. Can i have a true sticky footer with a fixed header?
How can i implement a sticky footer with a fixed header? I can't add padding or a margin to the body or content, since that will break the footer. Also, i want to be able to use width:100% and height: 100% inside my content without it overflowing and creating a mess.
Here is what i am aiming for (Please excuse my great Photoshop skills) :
This look good, when i use position:fixed; and bottom:0; on my footer. But to make it truly sticky, i need to add some css to my page. (from : http://css-tricks.com/snippets/css/sticky-footer/)
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}
This allows me to have a GREAT looking sticky footer, but here is the problem. Some of the content is underneath my fixed navigation bar.
I can't add padding or a margin to the body, html, OR the content, because that will make the sticky footer mess up. Is there any way i can do this without CSS "Hacks"?
This is with the content under the header: http://jsfiddle.net/g2ydV/3/
Looks good right!, but some of the content is hidden under the header? Lets fix that by adding a margin to the content: http://jsfiddle.net/g2ydV/2/
The above example works, BUT the footer is messed up. How can i achieve this effect without messing up my sticky footer?
One potential solution is to swap your content:after to content:before.
Working Demo
CSS:
/* .content:after {
content: "";
display: block;
} */
.content:before {
content: "";
display: block;
height: 45px;
}
There's an alternative way of doing this using display: table; and display: table-cell which seems to be becoming increasingly popular.
I'm just offering it up as an alternative worth having a look at. It's quite clean and doesn't require any defined heights for the header and footer which is nice.
HTML
<div id="wrap">
<div id="wrap-inner">
<div class="navbar">
<span>Fixed Header (content under here)</span>
</div>
<div class="content">
<p>Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer</p>
</div>
<div class="footer">
<span>Sticky footer!</span>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
body {
margin: 0;
}
#wrap {
display: table;
width: 100%;
height: 100%;
min-height: 100%;
}
#wrap-inner {
vertical-align: middle; /* optional for positioning content in the middle */
display: table-cell;
}
.navbar, .footer {
position: fixed;
width: 100%;
}
.navbar {
top: 0;
width: 100%;
}
.footer {
bottom: 0;
}
Demo
it's my decision for fixed header
html {
position: relative;
min-height: 100%;
}
#main-container {
padding-top: 55px; /* this is header height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
body {
margin: 0;
padding:0;
line-height: normal;
height: 100%;
overflow: hidden;
}
.header {
background:#3d5084;
padding: 16px 0 16px 30px;
display: flex;
align-items: center;
justify-content: center;
}
.main-middle-container {
padding: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
height: calc(100vh - 150px);
flex-direction: column;
overflow: hidden;
overflow-y: auto;
background: #f1f1f1;
}
.footer {
background: #3d5084;
padding: 11px 25px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
position: relative;
z-index: 1;
}
Demo link