| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| "DTD/xhtml1-strict.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
| <head> |
| <title>Example 2: Position a footer with CSS - step 2</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
| <style type="text/css"> |
| <!-- |
| html, body { |
| height: 100%; |
| } |
| body { |
| margin: 0; |
| padding: 0; |
| font: 12px/1.5 verdana, arial, helvetica, sans-serif; |
| } |
| #container { |
| position: relative; |
| min-height: 100%; |
| } |
| #content { |
| padding: 10px; |
| background-color: #6caad9; |
| padding-bottom: 48px; |
| } |
| #footer { |
| position: absolute; |
| bottom: 0; |
| padding: 10px; |
| background-color: #0066b2; |
| width: 75%; |
| } |
| #footer h1 { |
| color: #fff; |
| padding-bottom: 0; |
| } |
| h1, p { |
| margin: 0; |
| padding-bottom: 1em; |
| } |
| h1 { |
| font-size: 12px; |
| line-height: 1.5em; |
| } |
| --> |
| </style> |
| </head> |
| <body> |
| <div id="container"> |
| <div id="content"> |
| <h1>Content</h1> |
| <p>Please resize the browser window to see how your 100% CSS footer behaves.</p> |
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis, convallis vel, mauris. Ut sed mauris vel metus pretium pretium. Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in, justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel, urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo. Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a, fermentum a, accumsan et, neque.</p> |
| </div> |
| <div id="footer"> |
| <h1>Footer</h1> |
| </div> |
| </div> |
| </body> |
| </html> |
