Solved

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

Posted on 2013-11-06
4
245 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

730 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