I'm trying to put a footer at the end of my homepage component. In my website, the overflow is made auto only for mobile view with a media query, so the scroll remains hidden for desktop view. I have used all the solutions I could find but nothing helps, the footer is perfectly aligned in desktop view at the bottom, but for mobile view, it is aligned at the end of the screen (not the page). I have no clue how to fix this.
website: https://shivamaima.netlify.com/
git: https://github.com/darwin619/portfolio
.homepage {
text-align: center;
width: 100%;
position:relative;
padding:0;
margin:0;
min-height:100vh;
top:0;
#media screen and (max-width: 600px) {
overflow: auto;
height: 100vh;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
There's a couple solutions here. Instead of bottom: 0 use:
margin-top: 100vh;
This will set the footer at the bottom of the viewport height.
However, your page has quite a few layout issues, and this is really a band-aid. You should consider utilizing flexbox, min-height, or grid to create a sticky footer.
That being said, the solutions for this using react are what they would be in most any circumstance.
The following solutions are preferable because they are "true" dynamic sticky footers. Meaning, the footer stays at the bottom until the main content extends beyond that area, at which point the footer will begin adjusting its position downward:
The min-height Solution
nav {
height: 40px;
padding: 10px;
background: lightblue;
}
main {
padding: 20px;
background: purple;
min-height: calc(100vh - 170px);
}
footer {
background: magenta;
padding: 10px;
height: 50px;
}
<html>
<body>
<nav>
Navigation
</nav>
<main>
Page content
</main>
<footer>
Footer that stays put
</footer>
</body>
</html>
As can be seen, we set the minimum height of the content to 100vh minus whatever the combined height (plus padding) happens to be of your nav and content containers.
This results in a footer that sticks, along with the ability to drop further if the content exceeds the min-height value.
The same effect can be accomplished using flexbox, which is arguably a more dynamic solution. However, it comes at the expense of an extra container element. We could apply flex to body, but that is rarely a proper solution:
The flex box solution
.container {
display: flex;
min-height: calc(100vh - 40px);
flex-direction: column;
}
nav {
height: 40px;
padding: 10px;
background: lightblue;
}
main {
padding: 20px;
background: purple;
flex: 1;
}
footer {
background: magenta;
padding: 10px;
height: 50px;
}
<body>
// Use className instead of class for react (jsx)
<div class="container">
<nav>
Navigation
</nav>
<main>
Main Content Area
</main>
<footer>
Footer that stays put
</footer>
</div>
</body>
The CSS Grid Solution with min-height
.container {
display: grid;
grid-gap: 1em 0;
grid: auto auto 1fr / 10vw 1fr 10vw;
margin: 0;
min-height: calc(100vh - 40px);
}
nav {
background-color: lightblue;
grid-column: 2;
padding: 20px;
}
main {
background-color: purple;
display: grid;
grid-column: 2;
padding: 20px;
}
footer {
background-color: magenta;
align-self: end;
grid-column: 2;
padding: 20px;
}
// Use className instead of class for react (jsx)
<div class="container">
<nav>
Navigation
</nav>
<main>
Main Content Area
</main>
<footer>
Footer that stays put
</footer>
</div>
Note: Change class to className if you're working on a react project.
I'm trying to make a fixed "floating" footer with variable height, that always appears at the bottom even when the content changes.
I have the following Create React App HTML:
<html>
<body>
<div id="root">
<div class="app">
<div class="header"></div>
<div class="content"></div>
<div class="footer"><div>
</div>
</div>
</body>
</html>
And the following CSS: (According to second answer on Fixed header, footer with scrollable content)
html, body, #root {
height: 100%
}
.app {
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: nowrap;
}
.header {
flex-shrink: 0;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
overflow: auto;
flex-grow: 1;
}
.footer {
flex-shrink: 0;
}
However, as the content dynamically changes the page gets distorted and elements overlap each other. I've found that setting #root with height: 275% makes the page display properly in the expanded state (and only then).
Setting #root with min-height: 100% makes the footer appear at the middle of the page when there isn't enough content, and it is not floating anymore when the content is scrollable.
I think this is what you are trying to achieve https://codepen.io/anon/pen/bmMrOg
<div id="root">
<div class="app">
<div class="header">
header
</div>
<div class="content">
<div>content</div>
</div>
<div class="footer">
footer
<div>
</div>
</div>
And the CSS
html, body, #root {
height: 100%;
margin: 0
}
.app {
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: nowrap;
flex-direction: column;
}
.header {
flex-shrink: 0;
background: blue;
}
.content {
overflow: auto;
flex-grow: 1;
background: red;
}
.footer {
flex-shrink: 0;
background:green;
}
Here is my code to stick the footer to bottom of the page:
#footer {
background-color: #0F2157;
width: 100%;
bottom: 0px;
min-height: 35px;
padding-top: 5px;
}
When I'm doing it with height it works perfectly fine, but when I'm trying to set the minimum height it leaves a little space under the footer. Any guess how to fix that?
First of all, the height of body, html and container (see element with class 'container') has to have height: 100%;
In this solution I have used flex box. It is supported by all modern browsers and IE11.
It's necessary to add the following properties to container:
display: flex;
flex-direction: column; /*the flex items are placed in column, by default it is in row*/
To move footer to bottom, just add to flex item
margin-top: auto; /* it grabs all free space between flex items and put it before this flex item */
html, body {
height: 100%;
}
.container {
height: 100%;
background-color: green;
display: flex;
flex-direction: column;
}
.header {
height: 20%;
background-color: yellow;
}
.content {
background-color: white;
}
.footer {
min-height: 20%;
background-color: blue;
margin-top: auto;
}
<div class="container">
<div class="header">Header</div>
<div class="content">It's content</div>
<div class="footer">Footer in bottom</div>
</div>
What about using Flexbox? It is supported by IE>=10.
To use that, you have to split your page at least in two separated elements: The "upper"-one (.content) with the whole content of your page and the footer.
The "upper"-one gets the value flex: 1, which is a shorthand for:
flex-grow: 1
flex-shrink: 1
flex-basis: auto
This means, that the "upper"-element could grow to the maximum, while the footer reserves only it's actually required space.
Code snippet
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div class="content"></div>
<footer class="footer">
Hey footer!
</footer>
</body>
</html>
You used min height 35 px. I think your content's height inside of footer is more than 35px. So check the margin or padding of all footer elements.
It will be better, if you can make a jsfiddle demo.
[SOLVED]
I found this to be working for my example:
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
I have a page with an outer div that wraps a header, content and footer div. I want the footer div to hug the bottom of the browser, even when the content div is not tall enough to fill the viewable area (i.e. there's no scrolling).
Your issue can be easily fixed by using flexbox. Just wrap your .container and your .footer in a flex container with a min-height: 100vh, switch the direction to column so that they stack on top of each other, and justify the content with space between so that footer will move to the bottom.
.flex-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: space-between;
}
<div class="flex-wrapper">
<div class="container">The content</div>
<div class="footer">The Footer</div>
</div>
While this question is old, I want to improve slightly on the great answer by Luke Flournoy.
Luke's answer only works if you have two elements in the wrapper. It's very common to have at least 3: header, main content and footer. With these three elements, Luke's code will space them evenly vertically - most likely not what you want. With multiple elements, you can do this:
.flex-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: flex-start;
}
.footer {
margin-top: auto;
}
<div class="flex-wrapper">
<div class="header">The header</div>
<div class="content">The content</div>
<div class="footer">The footer</div>
</div>
What I wanted was to have the footer be at the bottom of browser view ONLY IF the content was not long enough to fill up the browser window (non-sticky).
I was able to achieve by using the CSS function calc(). Which is supported by all modern browsers. You could use like:
<div class="container">CONTENT</div>
<div class="footer">FOOTER</div>
the css:
.container
{
min-height: 70%;
min-height: -webkit-calc(100% - 186px);
min-height: -moz-calc(100% - 186px);
min-height: calc(100% - 186px);
}
Change 186 to the size of your footer.
Use a blank div with flex-grow:1 to fill unused spaced right before the footer.
<body style="min-height: 100vh; display: flex; flex-direction: column;">
Any content you want,
put it here. Can be wrapped,
nested, whatever.
<div style="flex-grow:1"></div>
<!-- Any content below this will always be at bottom. -->
<footer>Always way at the bottom</footer>
</body>
Extract the styles to css as needed. This works by setting <body> as display:flex;
Example : http://jsfiddle.net/AU6yD/
html, body { height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }
#bottom, #push { height:30px;}
body { background:#333;}
#header { height:30px; background:#000; color:#fff; }
#footer { height:30px; background:#000; color:#fff; }
<div id="wrapper">
<div id="header">
Header
</div>
<div id="push"></div>
</div>
<div id="bottom">
<div id="footer">
Footer
</div>
</div>
I did what Jahmic up top did (won't let me comment yet) except I had to use VH instead of % since I couldn't just apply it to a container class.
#inner-body-wrapper
{
min-height: 70vh;
min-height: -webkit-calc(100vh - 186px);
min-height: -moz-calc(100vh - 186px);
min-height: calc(100vh - 186px);
}
You can do exactly what you want using Flexbox, as an example will be:
html, body {
height: 100%;
width: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.content {
flex-grow: 1;
}
as a note the footer must be outside the content element
html structure will be something like follow:
<html>
<body>
<div class="wrapper">
<header></header>
<div class="content">
<!-- Content -->
</div>
<footer></footer>
</div>
</body>
</html>
I Found this very simple way, just take the main container add min-height and make the footer sticky
body { /* the main container */
min-height: 100vh;
}
footer {
position: sticky;
top: 100%;
}
There are great answer above, i think the problem is that nowadays most people whant to do this with some framework like React, Next or Vue, these frameworks add another element to wrap all the html rendered by the framework like divs with an id #root #__next
so we have to aply the style to that element
To make it work responsively when the footer is taller on mobile devices compare to on desktop, you can't really know the footer height. One way to do it is to stretch the footer out to cover the entire screen.
html,
body {
height: 100%;
}
.container {
min-height: 80%;
background-color: #f3f3f3;
}
.footer {
background-color: #cccccc;
box-shadow: 0px 500px 0px 500px #cccccc;
}
<div class="container">Main content</div>
<div class="footer">Footer</div>
body{
position:relative;
min-height:100vh;
}
footor{
position:absolute;
bottom:0%;
width:100vw;
}
Best solution to have this done was a previous reply from #DR-MATTH, assuming that the body is the main container:
body {
min-height: 100vh;
}
footer {
position: sticky;
top: 100%;
}
I just wanted to add that I had to use this variation min-height: calc(100vh - "any margin top/bottom of any sibling element above the footer"); to make the footer really sticky at the bottom when the page have not enough content and avoiding unnecessary scrolling.
Something like this:
body {
min-height: calc(100vh - 60px);
}
footer {
position: sticky;
top: 100%;
}
I tried: http://jsfiddle.net/AU6yD/ as here it's the best option but I had problems when the content of the <div id="wrapper"> started to get too big see
evidence.png, what I did to solve this was refreshing the body size everytime I changed the content of that div like this:
var body = document.body,
html = document.documentElement;
body.style.height = 100 + "%";
setTimeout(function(){
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight,
html.offsetHeight );
body.style.height = height + "px";
}, 500);
Try with this codepen.io/dendii/pen/LLPKJm media responsive
html, body {
color:#fff;
}
.wrapper{
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 auto;
min-height: 100vh;
}
.main{
width:100%;
overflow:hidden;
}
.main-inner {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
article,aside{
float:left;
padding:20px 10px;
}
article{
width:70%;
background:darkred;
}
aside{
width:30%;
background:darkblue;
}
.top {
padding:20px 10px;
height:100%;
background:darkgreen;
}
.bottom,.text-mid {
padding:20px 10px;
height:100%;
background:darkorange;
}
.text-mid {
margin-top: auto;
background:darkgrey;
}
#media (max-width: 768px){
.main-inner{
display: block;
}
article,aside{
width:100%;
float:none;
display: block;
}
}
<div class="wrapper">
<header class="top">
<h1>Header</h1>
</header>
<div class="main"><div class="main-inner">
<article>
blank content
</article>
<aside>
class sidebar
</aside>
</div></div>
<div class="text-mid">
<div class="center">
Whatever you want to keep.
</div>
</div>
<footer class="bottom">
<div class="footer">
Footer
</div>
</footer>
</div>
Another alternative if you want a main-wrapper to adjust the screen EqualHeight
I've solved same problem with jquery
var windowHeiht = $(window).height();
var footerPosition = $("#asd-footer").position()['top'];
if (windowHeiht > footerPosition) {
$("#asd-footer").css("position", "absolute");
$("#asd-footer").css("bottom", "0");
$("#asd-footer").css("width", "100%");
}
Reworking the jQuery solution. I have it working with resizing the window. When the window is bigger than the page, the footer style's position is "absolute" fixed at the bottom the window. When the window is smaller than the page, the footer stays at the bottom of the page - scrolling off the bottom.
<style>
.FooterBottom {
width:100%;
bottom: 0;
position: absolute;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
FooterPosition();
$(window).resize(function () {
FooterPosition();
});
});
var originalFooterBottom = 0;
function FooterPosition() {
var windowHeight = $(window).height();
if (originalFooterBottom == 0) {
var footer = $("#Footer");
originalFooterBottom = footer.position()['top'] + footer.height();
}
if (windowHeight > originalFooterBottom) {
var footerElement = document.getElementById("Footer");
if (!footerElement.classList.contains('FooterBottom')) {
footerElement.classList.add('FooterBottom');
}
}
else {
var footerElement = document.getElementById("Footer");
if (footerElement.classList.contains('FooterBottom')) {
footerElement.classList.remove('FooterBottom');
}
}
}
</script>
I tried many style only solutions but none of them worked. This Javascript/Style solution works just fine for me, even with its odd mix of jQuery and GetElement.
Thanks to Asad for his post.
i had just changed the position to sticky and set top to 100%.Then i go to its parent block and set its min height is 100%
This solved my problem.
In my case the parent block was body so i changed the min height of body.
.footer {
position: sticky;
top: 100%;
text-align: center;
width: 100%;
height: 60px;
background-color: #1abc9c;}
body{
margin:0;
padding:0;
min-height:100vh;}
To push a footer to the bottom of the page when content is short using tailwind.
Add the following to a class
flex flex-col justify-between min-h-screen
<div className="flex flex-col justify-between min-h-screen">
<div>
... //your body here
</div>
<Footer/> // your footer here
</div>
In my website i have 3 seperation divs div-header,div-body,div-footer. i put
min-height for div-body using javascript(i used window.height()) . so when content is low then it will maintain minimum height.so that the footer always be in bottom.
I tried this and it works fine so far
position:absolute;
bottom:0;
width:100%;
or
position:absolute;
bottom:0;
left:0;
right:0;
Wrap your footer with a class as following:
<div class="footer">
<h1>footer content</h1>
Then add following css properties to the footer:
.footer{
position: fixed;
bottom: 0;
}
This is what I am doing for my page
<h6 style="position:absolute; bottom:0;">This is footer at bottom of page without scrollbars</h6>
I'm working on moving from using tables for layout purposes to using divs (yes, yes the great debate). I've got 3 divs, a header, content and footer. The header and footer are 50px each. How do I get the footer div to stay at the bottom of the page, and the content div to fill the space in between? I don't want to hard code the content divs height because the screen resolution can change.
Flexbox solution
Using flex layout we can achieve this while allowing for natural height header and footer. Both the header and footer will stick to the top and bottom of the viewport respectively (much like a native mobile app) and the main content area will fill the remaining space, while any vertical overflow will be scrollable within that area.
See JS Fiddle
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
flex: none;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
}
To summarize (and this came from the CSS Sticky Footer link provided by Traingamer), this is what I used:
html, body
{
height: 100%;
}
#divHeader
{
height: 100px;
}
#divContent
{
min-height: 100%;
height: auto !important; /*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -100px; /*Allow for footer height*/
vertical-align:bottom;
}
#divFooter, #divPush
{
height: 100px; /*Push must be same height as Footer */
}
<div id="divContent">
<div id="divHeader">
Header
</div>
Content Text
<div id="divPush"></div>
</div>
<div id="divFooter">
Footer
</div>
To expand on Mitchel Sellers answer, give your content div height: 100% and give it a auto margin.
For a full explanation and example, see Ryan Fait's CSS Sticky Footer.
Since you know the size (height) of your header, put it inside the content div (or use margins).
Position absolute will give you problems if your content is larger (taller) than the window.
A way to do this using CSS Grid:
index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet">
</head>
<body>
<main>
<header>Header</header>
<section>Content</section>
<footer>Footer</footer>
</main>
</body>
</html>
main.css
body {
margin: 0;
}
main {
height: 100%;
display: grid;
grid-template-rows: 100px auto 100px;
}
section {
height: 100%;
}
Use CSS grid instead it is supported by nearly all the browser
html{
height: 100%;
}
body{
margin: 0;
padding: 0;
height: 100%;
}
.main-body{
display: grid;
/* let content auto to occupy remaining height and pass value in fit-content with min-height for header and footer */
grid-template-rows: fit-content(8rem) auto fit-content(8rem);
grid-template-areas: "header" "main" "footer";
}
.main-header{
background-color: yellow;
grid-area: header;
}
.main-content{
grid-area: main;
}
.main-footer{
background-color: green;
grid-area: footer;
}
<body class="main-body">
<header class="main-header">
HEADER
</header>
<main class="main-content">
this is content
</main>
<footer class="main-footer">
this is footer
</footer>
</body>
HTML
<body>
<header>
</header>
<main>
...
</main>
<footer>
</footer>
</body>
CSS
html, body {
height: 100%;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
header {
height: 10px;
background: red;
width: 100%;
}
footer {
height: 10px;
background: red;
width: 100%;
}
This css to body will make sure that header and footer are always on top and bottom respectively.
Put all the content in main.
going further you can make header or footer sticky as per your requirement.
Check the working example here
https://codepen.io/vishal657/pen/MWBOErq?editors=1100
if you are trying to maximize the height of your content div, in the CSS add
height: 100%;
#footer {
clear: both;
}