Solved

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

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Css issue on scroll 1 38
HTML date format to popup calendar as soon as you click 7 39
Put glyphicon in my input button 4 23
push logos in footer up higher 4 0
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…

914 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

18 Experts available now in Live!

Get 1:1 Help Now