This question already has answers here:
How to keep footer at bottom of screen [duplicate]
(6 answers)
Closed 7 years ago.
I have emberjs application and I tried to create sticky footer.
My html:
<div class="main-container" id="">
<header> HEADER </header>
<div class="container">
{{outlet}}
</div>
<footer>
footer text
</footer>
</div>
The CSS:
.ember-view {
height: 100%;
}
.main-container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
}
footer {
clear: both;
line-height: 40px;
width: 100%;
}
For unknown reason the footer is still not stick to the bottom.
Any idea?
Thanks a lot :)
In your css you should add the following properties to your footer
footer {
position: fixed;
bottom: 0;
}
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
(37 answers)
Footer at bottom of page or content, whichever is lower
(5 answers)
Closed 2 years ago.
I am looking for the simplest solution to have a div positioned sticky and always rendered at the bottom of the viewport. I don't want to use position: fixed because the element will be out of the document flow and when I have more content on the page it will hide part of it without triggering overflow.
Sticky on the other hand is problematic when I have too little content on the page then it renders immediately after that content and not all the way on the bottom of the viewport.
Is there a simple way to make sticky always be on the bottom of the viewport by using only HTML/CSS?
Use bottom: 0, e.g.:
html, body {
height: 100%;
}
/* need something scrollable: */
.dummy {
background: #eee;
height: 200%;
border: #f00 1px solid;
}
.stick-bottom {
position: sticky;
bottom: 0;
}
...
<div class="dummy">Lorem ipsum</div>
<div class="stick-bottom">bottom</div>
I see two solutions here.
Using display: flex;
You can make a column layout that covers whole screen (100vh) made of two containers.
Top container would manage the page content
Bottom container would be the footer that would always be "sticky", although not literally CSS sticky.
Example:
.container {
height: 100vh;
background: blue;
display: flex;
flex-direction: column;
}
.content {
height: 100%;
overflow: auto;
}
footer {
height: 60px;
background: red;
}
body {
margin: 0;
padding: 0;
}
<div class="container">
<div class="content">
<div>Ping</div>
<div>Ping</div>
<div>Ping</div>
<div>Ping</div>
<div>Ping</div>
<div>Ping</div>
<div>Ping</div>
<div>Ping</div>
</div>
<footer>This is the footer</footer>
</div>
Using position: sticky;
Given two containers (main and footer), you need to apply a min-width: calc(100vh - footerHeight) on the main container, while footer is sticked to the bottom of their container.
This means that the main container will always cover at least 100vh - footerHeight.
Example:
body {
padding: 0;
margin: 0;
}
footer {
background: red;
position: sticky;
bottom: 0;
height: 60px;
}
.content {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
position: relative;
}
<div class="content">
<p>Ping</p>
<p>Ping</p>
<p>Ping</p>
<p>Ping</p>
<p>Ping</p>
</div>
<footer>This is the footer</footer>
I'm not sure how complex UI you have, but for a simple layout without using the CSS position you can use element height to have a div positioned sticky and always rendered at the bottom of the viewport:
HTML
<div class="full">
<h2>body</h2>
</div>
<div class="sticky">
<h4>Sticky</h4>
</div>
CSS
html, body {
height: 100%;
}
.full {
min-height:calc(100% - 70px);
background:#ccc;
}
.sticky {
height:70px;
text-align: center;
background:#000;
color:#fff;
}
This question already has answers here:
CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
(37 answers)
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 3 years ago.
So, I am trying to achieve this:
I know this looks like an already asked question but I have tried all the available solutions of stackoverflow.
My current structure is:
HTML:
<div class='app'>
<div class='content'>Content</div>
<div class='footer'>Footer</div>
</div>
CSS:
.app{
text-align: center;
background-color: #1a1f25;
min-height: 100%;
width: 100%;
position: relative;
overflow-y: auto;
top: 0;
}
.footer{
color: lightgray;
padding: 10px 30px;
position: absolute;
width: 100%;
font-size: 10px;
background: black;
bottom: 0;
}
Update: I tried checking the answer given here, but my website is responsive and that answer is for those footers which have fixed height. Which makes it difficult to convert that solution for my usecase.
This question already has answers here:
Footer below content, but not floating mid-air if not enough content
(6 answers)
Closed 7 years ago.
I have to set the footer on the bottom but in the way I'm using it's always at the bottom even if the page content is bigger than the screen.
If the content its bigger than the screen I would like to have to scroll in order to see the footer.
.fijo{
bottom: 0;
position: fixed;
width:100%;
}
You need to use a sticky footer.
HTML
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Easy one, just use the following CSS code
#footer {
position: absolute;
bottom: 10;
left: 0;
}
The ID of the footer should of course be "footer" in order for this to work, or rename it to whatever you like.
Hope this helps :)
Here is the solution
Demo
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ffff00;
padding:20px;
text-align:center;
}
#content {
padding-bottom:50px; /* Height of the footer element */
text-align:center;
}
#footer {
background:#00ffff;
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
text-align:center;
}
HTML:
<div id="wrapper">
<div id="header">Header is here</div>
<div id="content">Content is here</div>
<div id="footer">Footer is here</div>
</div>
If you are using HTML5 in combination with Twitter Bootstrap or any other template, or even pages built from scratch, you can also apply it directly on the footer element with no additional ID or class selectors required using the code #pzp provided above:
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 7 years ago.
After researching pure CSS ways to "sticky" my footer, I am at a loss. Here is the structure of the layout on my site:
<html>
<body class="pages">
<div id="global" class="global">
<div class="pusher">
<header class="fixed"></header>
<section id="content"></section>
<div id="footerbottom"></div>
</div>
</div>
</body>
</html>
What I have tried with some success is adding
min-height: 100vh;
to the "content" section, but it's still not good enough.
Any suggestions to make the <div id="footerbottom"></div> stick to the bottom?
You could use pure CSS with: position: absolute and bottom:0px.
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 150px;
}
#footerbottom {
position: absolute;
left: 0;
bottom: 0;
height: 150px;
width: 100%;
background-color:red;
text-align:center;
}
Here is the fiddle: http://jsfiddle.net/X2NqX/332/
Or a framework like Bootstrap makes it easy: https://getbootstrap.com/examples/sticky-footer/
This is a really common problem we all come across; I do invite you to have a look at this http://ryanfait.com/sticky-footer/
Know you will have to reformat you're whole html but till now I do think it is the best solution.
Or eventually as said before you could use Bootstrap solution which is -for my concern- not really optimised for every case but could work in yours.
Try this out. I think it's a better solution than using absolute positioning especially when making a responsive site.
<body class="pages">
<div id="global" class="global">
<header class="fixed"></header>
<section id="content"><p>
content<br>
content
</p></section>
</div><!--end global-->
<div id="footerbottom">The footer</div>
</body>
CSS:
html, body {
height: 100%;
}
#global {
min-height: 100%;
}
#content {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footerbottom, #global:after {
height: 100px;
}
#global:after {
content: "";
display: block;
}
#footerbottom {
background: red;
position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
}
Check out the fiddle here: https://jsfiddle.net/tpbt60ff/
Better explanation here: http://www.cssstickyfooter.com/using-sticky-footer-code.html
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 8 years ago.
I've read a lot of articles and existing questions on stackoverflow. I've litteraly tried over 10 different pieces of code. It just doesn't work.
I've got a website, and I would like the footer to stick on the bottom no matter what. I mean, litteraly stick on the bottom. I do not want it to move with the height of the window of the browser. I want it to stay below all existing divs.
At the moment the footer is at the bottom of the page. But it moves with the height of the window of my browser. So, if I minimize my browser, the footer will move upwards with the height of the browser. I do not want that.
I've tried a lot, but it doesn't work. This is my current code:
body{
background-image: url('../images/bg.png');
background-repeat: repeat;
margin: 0px;
padding: 0px;
}
body, html{
height: 100%;
}
#body{
width: 1024px;
min-height: 100%;
margin: 0 auto;
}
#footer{
clear:both;
min-height: 150px;
width: 100%;
background-image: url('../images/footerbg.png');
background-repeat: repeat;
}
The body ID is the wrapper. The footer is outside the body wrapper
<body>
<div id="body">
<!-- HEADER -->
<div id="logo"></div>
<div id="menu">
<ul id="hmenu">
<!-- stuff -->
</ul>
</div>
<div id="page">
<!-- stuff -->
</div>
</div>
<div id="footer">
<!-- stuff -->
</div>
<div id="navigationbar"></div>
</body>
Edit:
The problem has to do with one of the divs inside the "body" div. It is being positioned using an absolute position. Is there any way to get the footer stickied properly using Ryan Fait's method, whilst using an absolute position?
Edit #2: I forgot to use "clear:both". Solved it
Ryan fait has a solution to this: http://ryanfait.com/sticky-footer/
I modified it slightly using SASS:
$footer-height: 250px; /* Set size of sticky footer in the variable: */
.main-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto (-$footer-height); /* the bottom margin is the negative value of the footer's height */
}
.push {
clear: both;
height: $footer-height;
}
.footer-wrapper {
clear: both;
min-height: $footer-height;
background: #E7E7E7;
padding: 50px 0;
}
You could take out the variable for use with vanilla CSS.
Your HTML would look something like this:
<div class="main-wrapper">
<div class="wrapper"></div>
<div class="push"></div>
</div>
<div class="footer-wrapper"></div>
I think you should use this css for footer:
#footer{
position:fixed;
bottom:0;
background-image: url('../images/footerbg.png');
background-repeat: repeat;
}
like here.
All you need:
#footer{
position: fixed;
bottom: 0;
/* rest of your styles */
}
Also if you don't want content to be hidden behind the footer:
#body { /* your main div has an id of body, not to be mistaken for body tag */
padding-bottom: 150px /* height of footer */
}
Demo http://jsfiddle.net/2mzak87o/
Fix the div to the browser, then force it to have a 0 margin on the bottom and left.
#footer{
position: fixed;
bottom: 0;
left: 0;
clear:both;
min-height: 150px;
width: 100%;
background-image: url('../images/footerbg.png');
background-repeat: repeat;
}
If you want the div in the middle of the bottom, create a container with width:100% and then have the footer contain "margin: 0 auto"
try this :
#body {
width: 1024px;
min-height: 80%;
margin: 0 auto;
position: relative;
}
#footer {
clear: both;
min-height: 20%;
width: 100%;
background-image: url('../images/footerbg.png');
background-repeat: repeat;
}