Solved

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

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Centering a nested div 16 76
Download a website to hdd 2 65
Add box and text color changing for everything 1 24
How to position loader with CSS 3 36
"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…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

786 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