Solved

Have footer fill all the way to the bottom of the screen.

Posted on 2013-11-06
4
238 Views
Last Modified: 2013-11-07
Hello All,


The parent element "footer" has a background color, though this element expands to the height of its child elements, it does not expand to the bottom of the screen. I've attached a screen shot of the issue.

If I apply height:100%, it does than fill the footer, but allows you to scroll when you don't have to and you get a very large footer.

In suggestions?

CSS:
/* Footer */
footer {
	background-color:#016973;
	position:absolute;
	width:100%;
}
#mid-footer-stripe {
	height:40px;
	background: linear-gradient(to top, #d29948,#ffbb5a);
	
	/*backward compatibility*/
	background:-moz-linear-gradient(bottom, #e2a247,#ffbb5a); /*firefox*/
	background:-webkit-linear-gradient(bottom, #d29948,#ffbb5a); /*chrome, safari*/
	background:-o-linear-gradient(bottom, #d29948,#ffbb5a); /*opera*/
}
#footer-menu {
	margin-top:-25px;
	padding:10px;
	float:left; /*ensure the height adjusts for the menus*/
	border:3px solid #006973;
	position:relative; /*allowing for z-index*/
	z-index:10; /*putting above copyright*/
	overflow:hidden;
	/*box shadow*/
        box-shadow:0px 0px 10px 0px #373737;
        background:url('../images/backgrounds/bg-gradient.png') #008c97 no-repeat center;
}
#footer-menu ul.nav.menu {
	float:left;
	list-style-type:none;
}
#footer-menu li {
	padding:1px 8px;
}
#footer-menu li a {
	color:#151515;
	font-size:.9em;
}
#footer-menu li .nav-header {
	color:#ffffff;
}
#copyright {
	float:left;
	background-image:url('../images/backgrounds/bg-copyright.png');
	background-repeat:no-repeat;
	width:452px;
	height:44px;
	position:relative;/*allowing for z-index*/
	z-index:1; /*putting behind footer-menu*/
	padding-top:6px;
	margin-left:265px;
}
#copyright p {
	text-align:center;
	font-size:.8em;
}

Open in new window


HTML:
<footer>
    	<div class="orange-stripe"></div>
    	<div id="mid-footer-stripe"></div>
    	<!-- begin container -->
        <div class="container">
        	<div id="footer-menu">
        		<jdoc:include type="modules" name="bottom-nav" style="none" />
        	</div>
        	<div id="footer-logo">
            		<jdoc:include type="modules" name="user-4" style="none" />
            	</div>
            	<div id="copyright">
            		<jdoc:include type="modules" name="copyright" style="none" />
            	</div>
            	<div id="footer-affiliate">
            		<jdoc:include type="modules" name="affiliated" style="none" />
            	</div>
        <!-- end container -->
        </div>
    <!-- end footer -->
    </footer>

Open in new window

Capture.PNG
0
Comment
Question by:Morgan
  • 2
4 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39629895
please post a link to the page, or a minimum, the generated HTML for the whole page.
0
 
LVL 1

Author Comment

by:Morgan
ID: 39630137
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39630434
Try setting it with:

position:absolute; bottom:0px;



Cd&
0
 
LVL 1

Author Comment

by:Morgan
ID: 39630490
its always the simplest that is overlooked. Why didn't I think of that?

I guess that's why they say a second pair of eyes are good!

Thanks Coboldinosaur!
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now