How do I produce a footer that spans the whole width of the screen (despite screen resolution) and stays at the bottom of the page?
When I search for this I get people providing code for sticky footers (footers that hoover with the page), and saying use absolute positioning (which I hear is a no no).
A perfect example of what I mean is the one of the sites twitter bootstrap cites as an example (https://www.gathercontent.com/). On that site the footer (which looks like a hero unit or something) is always on the bottom of the page.
If you are using bootstrap, this example shows how you can do it. The name is misleading on the site, but it stays at the bottom of the page if there isn't much content. It also moves down the page if there is a lot of content (so doesn't stick).
The footer:
http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/
The CSS:
http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/sticky-footer-navbar.css
Make sure not to forget the
html {
position: relative;
min-height: 100%;
}
Use this jquery:
$(window).load(function () {
$('.footer').width($(window).width());
$(window).resize(function () {
$('.footer').width($(window).width());
});
});
Make sure you have a js file though
I was looking for something similar as I did not want the footer to hover. The footer was blocking the pull down menu elements on small mobile devices. All I did was to remove "navbar-fixed-bottom" from the footer class.
I changed
<div class = "footer navbar-fixed-bottom"></div>
to
<div class = "footer"></div>
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
To get straight to the point my issue is all sections briefly displaying at the same time stacked together upon initial loading.
I found the exact same issue asked by someone else on github and tried setting the height of all sections to 100% in css like so: .fp-section {height: 100%!important;} but it didn't work. (Correct me if I did it wrong.)
Then I finally found a solution that worked which was by hiding the body until the fullpage.js is fully loaded like so:
body {display:none}
body[class*="fp-viewing-"] {display:block}
Everything works fine with this solution EXCEPT for the responsive div that's supposed to show at certain screen width.
To clarify, my html structure consists of <div id="fullpage"> and <div id="responsive"> under body, fullpage div showing by default and responsive div set as display: none under media query and only showing at certain screen width.
What else can I do to stop all sections displaying the same time on first load?
Regarding the issue with the sections, check my answer here.
Basically:
Assuming #fullpage is your fullpage wrapper and that you use the default selectors for sections and slides:
html,
body,
#fullpage,
.section,
.slide,
.fp-tableCell,
{
height: 100%
}
I'm currently working on a CSS-based 3-column layout that has the following requirements:
On the desktop…
…all columns are shown.
On mobile devices…
…only the middle column is shown.
…the left column can slide in from the left, triggered by a swipe or a tap on a button.
…the right column can slide in from the right, triggered by a swipe or a tap on a button.
Independent of the device…
…the middle column contains three rows: The main header, a sub header, and the actual content.
…the main header scrolls away when scrolling down.
…the subheader is sticky on the top of the screen when scrolling down.
Now I tried to implement this:
Creating a 3-column layout and hiding the left and right columns is easy, using Bootstrap.
Having three rows in the middle column is easy, too.
To make the subheader sticky, I have two options:
Use position: sticky (best solution in technical terms, but not supported by any browser).
Use a script, attach to the scroll event and change to position: fixed on demand. This is what Bootstrap offers OOTB with its affix plugin. Using this plugin, it's an easy task, too.
Creating two sidebars and sliding them in is easy as well, using something such as Snap.js.
Problems start when I want to combine the sticky subheader with the sliding sidebars: The affix plugin simply stops working, and the subheader is not sticky any more. Basically, the problem comes down to issues with CSS transform and position: fixed, see Eric Meyer's awesome blog post on this and this answer.
One option to solve this could be to put the headers above the area where the sidebars slide in, so that they are not affected, but this is not what I want: I want the sidebar to push away everything.
How can I solve this? Is this possible at all?
Consider this post:
Applying snap.js to my main content wrapper seems to break *some* of my jQuery functions
Bootstraps affix.js listens to the $(window).on('scroll'... event. Snap.js seems to change the scrollable element from the "window" element to the element where you added the "snap-content" class. I dont see any other solution as to write the sticky functionality provided by bootstrap yourself.
Use this as a reference. Based on your current scroll position (in pixels) you can add css attributes or even whole css classes to the element you want to make sticky:
jQuery(document).ready(function ($) {
$('.snap-content').scroll(function () {
if ($(this).scrollTop() > 140) {
if ($("#navbar").css('position') !== 'fixed') {
$("#navbar").css("position", "fixed");
}
} else {
if ($("#navbar").css('position') !== 'static') {
$("#navbar").css("position", "static");
}
}
});
});
My <footer> tag will not seem to stay at the bottom of my page. I have tried several different techniques to fix it and none have worked.
I have included the link to my working site below.
http://stage.bmdigitalgroup.com/recipes.html
i think you want to put your footer at bottom of the page i any resolution, if am i right than here is answer.
.footer {
position:absolute;
border:0px;
}
for more tips, tricks and tutorial visit - blog.klassicweb.com
Based on your screenshot, it looks like your monitor's height is larger than your website's content or you have zoomed out a lot, so what you're seeing is totally normal. In a smaller monitor it would look just fine. You could add a min-height: rule to your sites container so it pushes the footer down to the specified value, but you need to figure out a min-height that makes sense to you and your users.
If you really want to make the footer always stick to the bottom regardless of the monitor's height or zoom level, then you could add the following rules - just keep in mind that in a page where there isn't much content, you will end up forcing users to scroll down for no reason if they need to get to the footer:
/*
This rule is already in your stylesheet.
I added it here just for reference.
*/
html, body {
height: 100%;
}
/*
This is the container that holds your whole site.
You should use an id like "#container" or "#site" so this rule
applies only to your site's main container.
*/
.container_12 {
min-height: 100%;
}
[Update]
I actually compromised on this problem for now by foregoing the fixed footer design.
It seems that there is no problem with dynamic content moving the footer and resizing containers appropriately unless the footer is fixed to the browser bottom initially.
I hope others will eventually provide a great solution that encompasses the best of both worlds.
I spent all day trying to get the footer to move down the page to accommodate dynamically added (via ajax) content. I really need some pointers or links because I haven't found anything that helps.
Basically:
My site has some pages that begin with only a text box and a button so that the total height of the content area is only a few inches beneath the header area.
I don't have any problem getting the sticky footer working so that the footer appears at the bottom of the browser window even when there is very little content on screen.
That same css layout works fine for other pages that have content that extends beneath the browser window.
The catch:
The content has to be rendered and passed to the browser with the initial load.
The Problem:
Any content that is added to the page via AJAX after the initial load paints down the page correctly -- but the footer remains in its initial location.
Please tell me there is a fix for this.
I can't post the css until checking with my boss first - if possible - and if needed, I will later - but it's just a very basic version of the many sticky footer css solutions floating around the web.
Thanks.
Currently fixed similar situation with small jQuery and CSS, where parameter is footer div object (i.e. $("#mainfooter")):
function positionFooter(obj){
if ($("body").outerHeight(true) > $(window).height()) {
obj.css("position","relative");
} else {
obj.css("position","fixed");
obj.css("bottom","0px");
}
}
Bound this function to $(document).ready and $(window).resize.
If ajax call resizes body, this should be called also after content load.
It sounds like your footer is using display: fixed or similar. Try changing the container of your footer to:
bottom: 0;
display: block;
position: absolute;
That will ensure it appears right at the bottom of whatever container it sits within (I'm assuming the <body> tag). Your problem now becomes ensuring that it appears at the bottom of the screen rather than the bottom of your document, which starts of being much shorter. You could accomplish this in a couple of ways, but perhaps the easiest would be to set a minimum height on your AJAX content container:
min-height: 600px;
height: auto !important /* This is a hack to make IE6 fix itself to a set height */
height: 600px; /* IE6 will always follow whatever instruction appears last, even if !important is specified */
The other approach is since you're using a JavaScript library (I assume?) to grab the required content, perhaps you could also adjust the height of the AJAX content container or change the footer's CSS once that content has loaded?
Without any code it´s hard to tell what the problem might be.
However, I´m using a sticky footer as described here that works very well although I haven´t added ajax content in it. Browser resizing works just fine though.
Use include in PHP and call the footer after the dynamic content appears.
I'm not sure you are looking for this, but I am also facing the same problem before and same CSS, where my content overlaps on the footer when i call the ajax through jQuery method.
Now I found the solution: Just get the div height through jQuery and apply the height to the div where you are returning your results from ajax.
var obj = $("#viewcomm").height();
if($.browser.msie) {
$("#viewcomm").height(obj).css({cursor:"auto"});
}
where here viewcomm is div ID.
I solved same kind of problem with following code, where content is the id of div where php pages load and footer is the footer tag.
var footerAdjustId = setInterval(adjustFooter, 2000);
function adjustFooter(){
$("footer").css("marginTop", $("#content").height() - $(window).height());
clearInterval(footerAdjustId);
}