Solved

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

Posted on 2013-11-06
4
244 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Changing Color of Page Section 4 24
Location of Buttons 4 17
How to resize a div in html 3 38
CSS DIV Height in Percent 1 8
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 …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

828 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