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.
Related
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/
My requirement is a page with a fixed position header and full border around the page.
Setting this up is simple, but I have a problem with the fixed position header overlapping the page border.
Visually, this shows the problem:
You can see the fixed position header overlaps the border on the right. My aim is to prevent this from happening.
This the relevant block of code I believe - testing this by setting position to relative, for example, will stop the header overlapping the right border, but I need the header to be fixed.
.site-header {
min-height: 100px;
background: blue;
position: fixed;
width: 100%;
z-index: 10;
}
Here is a pen to demonstrate the issue in full:
http://codepen.io/juxprose/pen/vERQQr
Any ideas? I've tried some z-index experiments as that appears to be the issue, but no luck. The 100% width also seems related to the issue. Any pointers much appreciated, thanks.
Try changing your css to this:
.site-header {
min-height: 100px;
background: blue;
position: fixed;
width: 100%;
z-index: -1;
}
.site-main {
position: relative;
margin: 100px 25px;
z-index:-2;
}
It's working on CodePen - hope it works for you too.
http://codepen.io/juxprose/pen/vERQQr
Please add left and right 10px then it will solve
replace width: 100% with right: 10px and left: 10px
.site-header {
min-height: 100px;
background: blue;
position: fixed;
right: 10px;
left: 10px;
z-index: 10;
}
Example: http://codepen.io/anon/pen/yyKGyJ
Result
I am a novice at CSS/HTML and need help with a certain issue. I am trying to make my opening div (w/ background image) cover the entire screen (which I have done successfully). The problem is, no matter what I try, I cannot get the next div to start after the initial div. I am including my HTML and CSS. Problem is that I cannot cause #map-contain to start after #opening. Thought it would simply be 'positioning' issue but I cannot solve this. Please help. http://jsfiddle.net/nELQF/ - (need black div to start at bottom of red div)
HTML
<div id="opening">
</div>
<div id="map-section">
</div>
CSS
html, body {
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
}
#opening {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid orange;
background-image: url('DSC_0577.JPG');
background-position: center;
background-size: cover;
}
#map-section {
width: 100%;
height: 800px;
background-color: black;
}
Given that the top element is absolutely positioned, you could do the same with the second element and set top:100% in order prevent the elements from overlapping.
Updated Example
#map-section {
width: 100%;
position: absolute;
height: 800px;
top: 100%;
background-color: black;
}
As an alternative, an arguably better approach allowing you to avoid having to absolutely position both elements would be to simply set a height of 100% on the html/body elements.
Example Here
So im making a very basic website with a photo gallery, I have this css for my footer.
#footer
{
color: #f0c;
font-size: 9px;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #c00;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 18px
And the bar does not scroll down with the rest of the page, instead scrolls up with the page like this: http://i.imgur.com/yqM9WDM.png
Help much apreciated!
I'm not totally sure what you're trying to achieve from your description, and can't comment. Are you trying to keep the red bar at the bottom of the window?
In that case, the important CSS is:
#footer {
position: fixed;
bottom: 0;
}
That will stick it to the bottom of the viewport (scrolling viewable area). The rest of the styling is up to you.
By the way, it would be better to use a class (.footer) than an ID (#footer) for this.
Use position: fixed or position: sticky instead of position: absolute to fix something on page. Read this article for more understanding how position works.
If I understand you correctly then what you want is to use position:fixed not position:absolute
Fixed position will literally fix your element in place.
Here's a fiddle with it in action - http://jsfiddle.net/mSE6c/
does this work for you?
CSS:
* {
margin:0;
}
html, body {
height: 100%;
}
#inhalt {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px;
}
#footer, #clearfooter {
height: 30px;
}
HTML:
<div id="inahlt">Inhalt <div id="clearfooter"></div></div>
<div id="footer">Footer</div>
Source:
http://www.flashjunior.ch/school/footers/fixed_stop.cfm
Use position:fixed instead of position:absolute, this will keep it in a single position.
http://jsfiddle.net/PM9Xt/ shows this while it's in action. top:0 keeps the header at the top, while bottom:0 keeps the footer at the bottom.
I know that this question has been asked many many times, but I haven't found a solution that actually works for me.
My html...
<body>
<div id="container">
</div>
<div id="footer">
</div>
</body>
My css....
body, html { min-height:100%;}
#container
width: 980px;
min-height: 100%;
margin: 0 auto;}
footer {
background-color: rgb(90,200,219);
height: 50px;
position: realative;
margin-top: -50px;
width: 100%; }
What is happening, is that the footer is totally sticking to the bottom of the page. But, when content is short, I still have to scroll down to find the footer which is sticking to the bottom. Can someone tell me what is wrong in my code?
I think you should fix up your CSS snippet as it has quite a number of things wrong with it. Use copy & paste to put it up here next time so your typo's don't throw anyone off.
body, html { min-height:100%; }
That should be height:100%;, but I think it might be a typo as you are saying that the footer sticks to the bottom, which it wouldn't if that line was really in your actual CSS.
#container is missing a bracket and should be #container {.
If those issues are fixed, in addition to the issues #Owlvark has pointed out. It seems to work fine here at jsFiddle. The only improvement I could think of was adding margin: 0px; to body, html, which might have been your issue as it gets rid of some extra space which would render a vertical scroll bar. But your issue seems more serious than that when you say you have to "scroll down to find the footer".
Try these methods I put together in a gist. https://gist.github.com/derek-duncan-snippets/4228927
body, html { /*body and html have to be 100% to push header down */
height:100%;
width: 100%;
}
body > #wrapper { /* all content must be wrapped... #wrapper is my id. Position relative IMPORTANT */
position: relative;
height: auto;
min-height: 100%;
}
#header {
height: 100px;
background: rgba(255,255,255,0.2);
}
#content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */
padding-bottom: 100px;
}
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: rgba(255,255,255,0.2);
position: absolute;
bottom: 0;
}