I'm not currently a great front-end guy, and right now I have a problem with my footer in my application. I wrongfully gave it max-width in the css. Basically I want it to always be on the bottom of the page no matter what size the screen is or how much content is on the page. Here is a screen shot of what I'm currently working with.
Screenshot:
Notice how the footer is kinda floating there in the middle of nowhere. I'd like it to be at the very bottom of the page right there. And if the user were to adjust the screen the footer would remain at the bottom. Here is my current HTML and CSS
HTML:
<div class="footer">
Copyright # 2016 Lockdown Inc
</div>
CSS:
.footer {
border-top: 1px solid #d3d5d5;
text-align: center;
margin-top: 40px;
padding: 20px;
background-color: #d2d2d2;
}
Any help with this would be great.
This is the general idea. Without your markup, I can't give you a more specific answer, but this should do it. position: fixed; will keep it at the bottom of the window.
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
If you'd rather have it at the bottom of the page, not necessarily the window...
body,html {
min-height: 100vh;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
For reference, this is a good article on the differences between position: fixed; and position: absolute;, and why position: relative; is important when you use position: absolute; https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Related
I wanted to create a footer which need to stay on the bottom of every screen, i have done it but the problem is it breaks on landscape view on small devices but on the portrait view it is working fine.
body, html {
height: 100vh;
position: relative;
}
.footer {
background: #0066cc;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
<div class="footer">
<div class="content">
<h4><small>Powered by</small> <img class="footer-img" src="images/logo.png" alt=""></h4>
</div>
</div>
i want it to stay at the bottom of every device and on landscape also!!
I have done it with this code it stays on the bottom of the page on landscape as well as portrait
-first i did css on my container (main div)
.container{
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
width: 100%; }
-second i change footer css
.footer{
background: #0066cc;
position: absolute;
bottom: 0;
width: 100%; }
and it fixed my problem .
by the way you don't get this problem every time but when you don't have enough content for your page footer will leave it's place and you'll get extra space on different devices even on the web view but when you have enough content for a page then footer will always stay at the bottom.
You just need to change the way you position the footer. As you wanted in same position, the fixed instead of absolute will do the job.
body,html{
height: 100vh;}
.footer{
background: #0066cc;
position: fixed;
left: 0;
bottom: 0;
width: 100%; }
I tried having my footer stick to the bottom of the page, but the more content I add to my body, then it just goes out of bounds. I can't see a fault in my CSS, so hopefully one of you will be able to sort it.
.footer {
padding-bottom: 0;
background: gray;
width: 100%;
position: absolute;
height: 50px;
bottom: 0;
left: 0;
right: 0;
}
Here is a JSFiddle: https://jsfiddle.net/367apj76/
Many Thanks for the help.
Remove the position: absolute; from .footer
UPDATE:
You should put everything but the footer in a div with the following CSS:
min-height: calc(100vh - *footer-height*px);
and the footer should go right after this div.
This will work because the new div cannot be smaller than the window size minus the footer, but grows with the window (that's what vh is for).
I have no idea how to fix this.
Putting things on position: relative will null out the bottom: 0px, and will also create tons of white space on pages that don't fit the entire height due to lack of content.
Putting it on absolute makes it cover content of pages that do have content long enough to generate a scroll bar.
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: absolute;
bottom: 0px;
}
This should be working right? For some reason it just doesn't. Is it Wordpress? Never had this problem before and I have already gone through and cleaned up a lot of issues that may have caused it.
EDIT:
Silly me... I forgot the html here.
Right now it has nothing in it so it is just:
<div class="footer"></div>
I have it like that just to test it.
To see what is happening you can visit it here:
http://www.yenrac.net/theme
I hope that helps clarify some things.
I have also created this theme from scratch.
If I got your question right, this should work:
http://jsfiddle.net/9qq1dtuf/
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 170px;
}
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: absolute;
bottom: 0px; left: 0;
}
Please try bellow css
.footer {
position: fixed;
bottom: 0;
height: 150px;
background: #3167b1;
width: 100%;
left: 0;
}
<div class='footer'>
</div>
Well, I doubt it's Wordpress ...unless you are using a pre-made theme (or something along those lines). It's pretty hard to see what you've done without seeing the HTML. But anyways, heres what I think might have been the problem:
You have selected the footer element that has a class of "footer". I'm going to go ahead and make an educated guess that you meant to select the footer element by its name (NOT it's class). So maybe it's just a small little tiny bitty fix (i.e. remove the "." before footer in your CSS):
footer {
width: 100%;
height: 150px;
background: #3167b1;
position: absolute;
bottom: 0px;
}
Just add this to your css:
body {
margin: 0;
padding: 0;
background: #efefef;
font-family: 'Lato', serif;
padding-bottom: 174px; //add this line - height of footer + margin from content
}
I added 24px margin from content as an example. It would be best if you added this to your css:
* {
box-sizing: border-box;
}
or just for the body
body {
box-sizing: border-box;
}
So as your added padding does not add to your height and you get unnecessary scroll-bars.
Most of my code in a jsFiddle:
http://jsfiddle.net/MilkyTech/suxWt/
The content should load on the first page in a white box, with overflowing content pushing the following sections of the page down. However, as can be seen the lower sections load over the top of the first page white box. I have tried changing the positioning/clears of the various sections but cannot seem to create the necessary movement.
<section class="page1">
<div class="huge-title centered">
<div id='detailsbox'>
<h1 id='eorvtitle'></h1>
<img id='eorvimage' src=''>
<div><p>lots of text lots of text
</div>
</div>
</section>
<section class="page2" id='page2'>
</section>
.page1 {
background: url('../img/bg.jpg')#131313;
background-size: cover;
height: 100%;
position: relative;
}
.huge-title {
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 180px;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align:center;
position: absolute;
float: left;
clear: both;
}
Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.
you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:
.page1 {
background: url('../img/bg.jpg')#131313;
height: 100%;
position: relative;
}
.huge-title {
position: relative;
top: 20%;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align: center;
position: relative;
float: left;
clear: both;
}
The proper function of an absolute position is to overlap content. If you want other content to automatically push down then use relative position.
The solution is to create an empty spacer div with float right or left. This would ensure there is space between the two.
Refer this answer
Absolute positioned elements are removed from the main flow of the HTML. That's why it's not pushing the elements below it down. It's now sitting on top of the elements before and after it rather than in between them.
You may want to check this out.
Whether or not absolute positioning makes sense in your case is hard to say without seeing the design you are trying to implement. Using default (aka "static") or perhaps relative positioning will push the other content down below the white box, but without a deign to look at it's hard to tell if that's the real solution.
You can add another empty section between page1 and page2 and give the css below
height: 100%;
Adding an empty div the size of the absolute entity between the absolute entity and other components may help.
I’d like to have a div called “content” which starts at the top of the page and extends down to the bottom, even when there’s no other content. I’m trying to figure out how to do this using very simple CSS, so I can implement it on my existing site. Here's the code I’ve been playing with:
html {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
body {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}
#content
{
position: relative;
top: 0;
margin: 0 auto;
border: 1px solid red;
width: 70%
}
This will make a div, but it ends up being pretty much just a red line at the top of the screen. If I add height: 900px; then it will work, but I’m trying not to use specific measurements.
Use min-height:100% so that it can grow if it has to, and remove all other rules (they're not doing anything).
How about #content { height: 100%; ... }?