SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fill the remaining freespace at the bottom with a div container?

    Hi,

    I have a webpage which consists of these 3 parts:
    1. Header (100% wide)
    2. Content (676px wide)
    3. Footer (100% wide)

    Now, I want the footer (or another div with the same background color) to extend to the browsers bottom. If the page is larger than the browser window, the footer shall remain at it's default height (scrolling with the rest of the page).

    This is not possible without JavaScript, right? Another problem is that the header (!) & content parts have no fixed height. But can this be done, cross-browser, without awfull hacks?

    This is my webpage:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head><title>100% Height CSS Layout</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    	
    <style>
    	
    	* {
    		padding: 0;
    		margin: 0;
    	}
    	
    	html, body {
    		height: 100%;
    	}
    	
    	body {
    		font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
    		font-size: 75%;
    	}
    	
    	h1 {
    		font-size: 1.4em;
    		padding: 10px 10px 0;
    	}
    	
    	p {
    		padding: 0 10px 1em;
    	}
    	
    	#header {
    		width: 100%;
    		height: 36px;
    		background-color: #ccc;
    		border-bottom: 2px solid #666;
    	}
    	
    	#container {
    		background-color: #ddd;
    		border-left: 2px solid #666;
    		border-right: 2px solid #666;
    		width: 676px;
    		margin: 0 auto;
    	}
    	
    	#footer {
    		width: 100%;
    		color: #fff;
    		text-align: center;
    		background-color: #666;
    	}
    	
    </style>
    	
    <body>
    	<div id="header">
    		header
    	</div>
    	<div id="container">
    		<h1>100% Height Demo</h1>
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel 
    			nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, 
    			quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. 
    			Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, 
    			sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed 
    			in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. 
    			Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam 
    			ultricies posuere justo. In feugiat.</p>
    		<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. 
    			Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna 
    			dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra 
    			accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. 
    			Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque 
    			orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus 
    			lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus 
    			commodo pharetra.</p>
    		<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, 
    			urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. 
    			Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing 
    			elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. 
    			Duis sit amet augue.</p>
    	</div>
    	<div id="footer">
    		copyright 2010
    	</div>
    
    </body>
    </html>
    Can somebody put me in the right direction? Thanks.

    Patrick

  2. #2
    SitePoint Addict
    Join Date
    Jul 2007
    Location
    San Jose, California
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could put the footer at a fix position.

  3. #3
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by baileylo View Post
    You could put the footer at a fix position.
    No, this does not work, because the footer still needs to be 'mobile' if the content is larger than one browser window. It only needs to be glued to the bottom if the content fits into the windows.

    Run my HTML code in a browser window and you will understand what I wanna do

    Patrick

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Location
    Dublin, Ireland
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're probably looking for a "sticky footer"

    See: http://www.cssstickyfooter.com/

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    1. Header (100% wide)
    2. Content (676px wide)
    3. Footer (100% wide)

    This is not possible without JavaScript, right?

    Hi,
    Yes it is possible, as
    gravitationalfx mentioned it is called a sticky footer layout. Unfortunately the link given was to a method that fails in IE7/8 and Opera.

    The problems with the min-height fast hack that the failed method uses are explained in the CSS FAQ link below.
    The IE8 and Opera min-height:100% bugs are explained and fixed also.
    How do you put a footer at the bottom of the window? (Sticky Footer)

    Here is an example that has the full width header and footer that you are wanting.
    http://www.css-lab.com/test/full-hdr-ftr.html

  6. #6
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    [SIZE=2]Here is an example that has the full width header and footer that you are wanting.
    http://www.css-lab.com/test/full-hdr-ftr.html
    That's exactly what I was looking for! Thank you very much. I already found another StickyFooter but this one was using the simple-non-IE7-hack.

    Again, thank you very much for your help.

    Patrick

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Location
    Dublin, Ireland
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Unfortunately the link given was to a method that fails in IE7/8 and Opera.
    Excellent - thanks for that, I'll update my resource links.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •