How can I get this footer to stick to the bottom of the screen?

Head out to http://brucegust.com/adm/bootstrap/sandbox.php

What you're looking at is a scaled down / streamlined version of a mess I'm trying to clean up and I'm stuck.

Bottom line: Despite the fact that you've got more than one "footer" class, I want to dictate the placement of the footer at the very bottom of the page using some inline styling. What's frustrating is that I had this working, but I'm part of a team and I'm thinking someone may have overridden some code, but no matter...

What can I put within the inline CSS that will force that footer to the bottom of the page?
brucegustPHP DeveloperAsked:
Who is Participating?
 
David KellyConnect With a Mentor Web developerCommented:
Well, even though it goes against my best instincts, (inline css is usually a big no-no for me), all you need is this:
<footer class="page-footer member-footer theme-footer-bg" style="height:auto; text-align:center; margin-bottom:0;position:absolute;bottom:0;">

Open in new window

0
 
Jim RiddlesConnect With a Mentor Prepress/OMS SpecialistCommented:
You can add the following CSS:
body {
    padding-bottom:50px;
}
footer {
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
    width:100%;
    background-color:#000;
}

Open in new window


Note that I have defined the height to 50px.  You can make it whatever you like, but you will need to define it, and add the same amount of padding to the bottom of your body.  I have also added the background color to see the footer contents, although you are free to adjust it to your needs.
0
 
David KellyWeb developerCommented:
Yep, I'd prefer to do this with an external style sheet too... ;)

Same method, different placement, I don't know why inline was specifically mentioned in the original question, but I assumed it was necessary.
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Jim RiddlesPrepress/OMS SpecialistCommented:
I saw that, and I assume that other team members may have access to the external style sheets, but maybe the author is the only one with access to this HTML file.  Not sure.  Either way, you are correct...same basic structure.
0
 
Slick812Connect With a Mentor Commented:
greetings brucegust, , , I am not sure by what you may or may not mean by your request as -
    "How can I get this footer to stick to the bottom of the screen?"

Also I looked at the page source and it had several CSS for "height; 100%;" which puzzled me?

any how, if you mean Stick to bottom, as never move, then I would use the CSS  "position: fixed;"
this worked to have the footer permantely on bottom and text color changed to see the footr mail
<footer class="page-footer member-footer theme-footer-bg" style="position:fixed;width:100%;bottom:0px;left:0px;">
	<div class="container">
		<div class="row">
			<div class="col-xs-12 white-text" style="text-align:center;">
				need help?&nbsp;<a href="#" ><i class="fa fa-phone"></i> &nbsp;(855) 581-9910</a>&nbsp;|&nbsp;
				<a href="mailto:support@appliedhealth.net" class="white-text1" style="color:#000;"><i class="fa fa-envelope"></i>&nbsp;support@appliedhealth.net</a><br>2017 Applied Health Analytics
			</div>
		</div>
	</div>
</footer>

Open in new window

0
 
brucegustPHP DeveloperAuthor Commented:
Gentlemen!

I'm in complete agreement with you as far as avoiding inline styling, but in this instance, given the spaghetti code (which is being overhauled and revamped as we speak) which includes several classes that have the potential to affect other design elements, the most direct solution is an inline dynamic so I appreciate your willingness to overrule your better judgment and help me out.

Given the manner in which all of you have contributed something significant to the solution, I'm going to distribute points equally and wrap up the question, but if any of you are willing, I do have one follow up question that I'd like to pose in the name of understanding the solution rather than just copying and pasting...

I had tried both "absolute" and "fixed" but was unable to get the result I needed. I also included "margin-bottom:0" as well as "bottom:0" but, again, nothing. It seems that you need all three to get the footer to stick to the bottom, but what's the difference between "margin-bottom:0" and "bottom:0?" I smell my remedy in the context of using both of those settings simultaneously, but I subconsciously equated those two things as the same. Obviously not, but what's the difference?

Thanks!
0
 
Jim RiddlesPrepress/OMS SpecialistCommented:
margin-bottom:0 sets the bottom margin of your FOOTER to 0 pixels whereas bottom:0 sets the bottom position of your FOOTER to 0px from the bottom of the screen.  I am not sure why you would need the margin-bottom:0, unless there is CSS somewhere setting the bottom margin for FOOTER elements to a different amount, and thus pushing the FOOTER up by that value.  Hopefully that clears it up for you.
0
 
brucegustPHP DeveloperAuthor Commented:
Perfect! Thank you, Jim!
0
 
Slick812Commented:
just like to add a thought, , I have used the    "position: absolute;" and the  "position: fixed;", in many web apps (sites), and now with most views in phones, these CSS positions are almost a requirement in small screen views, although many page "Templates" from premade CMS sources do not use these much, because they are based on desktop design standards and not phone view design standards. I would suggest that you experiment with "position: absolute;" and the  "position: fixed;" untill you know enough to use these in phone view page design. They can be a life saver for portrait view phone web pages, and greatly increase your display options by using them as with this footer thing
0
 
Jim RiddlesPrepress/OMS SpecialistCommented:
As Slick812 says, there is a difference in the behavior.
Absolute is the absolute position within the parent container, whereas fixed is the position within the Viewport.

If you had your FOOTER element wrapped in a container DIV then the using absolute with the FOOTER would place it absolutely within the enclosing DIV's structure, which may or may not position it at the bottom of the screen.  Given your sample page, I chose absolute, but using fixed is probably a better choice for elements that you always want to be at a given position within the viewport.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.