advanced code snippet search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Posted By

indianocean on 06/29/07


Tagged

css javascript template html crossbrowser


Versions (?)


Who likes this?

2 people have marked this snippet as a favorite

joseluis
joomla


Template with footer fixed to viewport, working in Safari too

Published in: HTML 

URL: http://veerle.duoh.com/index.php/blog/comments/designing_a_css_based_template_part_vii/

Footer moves dynamically when resizing browser. Behaviour of movement is in the Javascript.

Plain TextExpand 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7.   <title>Lorem ipsum dolor sit amet</title>
  8.  
  9. <style type="text/css">
  10.  
  11. body {
  12.    margin: 0;
  13.    padding: 0;
  14.    text-align: center;
  15. }
  16.  
  17. .clear {
  18. 	clear: both;
  19. }
  20.  
  21. #container {
  22.    margin: 0px auto;
  23.    text-align: left;
  24.    width: 692px;
  25.    border: 1px solid black;
  26. }
  27.  
  28. #content {
  29. 	width: 479px;
  30.   float: left;
  31. 	padding: 15px 0 10px 20px;
  32. }
  33.  
  34. #footer {	
  35. 	margin: 0px auto;
  36.   position: relative;
  37. 	background-color: #717F51;
  38. 	border-top: 9px solid #F7F7F6;
  39. 	width: 692px;
  40. 	padding: 5px 0;
  41. 	clear: both;
  42. }
  43. </style>
  44.  
  45. <script type="text/javascript">
  46. <!--
  47. function getWindowHeight() {
  48. 	var windowHeight = 0;
  49. 	if (typeof(window.innerHeight) == 'number') {
  50. 		windowHeight = window.innerHeight;
  51. 	}
  52. 	else {
  53. 		if (document.documentElement && document.documentElement.clientHeight) {
  54. 			windowHeight = document.documentElement.clientHeight;
  55. 		}
  56. 		else {
  57. 			if (document.body && document.body.clientHeight) {
  58. 				windowHeight = document.body.clientHeight;
  59. 			}
  60. 		}
  61. 	}
  62. 	return windowHeight;
  63. }
  64. function setFooter() {
  65. 	if (document.getElementById) {
  66. 		var windowHeight = getWindowHeight();
  67. 		if (windowHeight > 0) {
  68. 			var contentHeight = document.getElementById('container').offsetHeight;
  69. 			var footerElement = document.getElementById('footer');
  70. 			var footerHeight  = footerElement.offsetHeight;
  71. 			if (windowHeight - (contentHeight + footerHeight) >= 0) {
  72. 				footerElement.style.position = 'relative';
  73. 				footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
  74. 			}
  75. 			else {
  76. 				footerElement.style.position = 'static';
  77. 			}
  78. 		}
  79. 	}
  80. }
  81. window.onload = function() {
  82.  setFooter();
  83. }
  84. window.onresize = function() {
  85.  setFooter();
  86. }
  87. -->
  88. </script>
  89. </head>
  90.  
  91. <body>
  92. <div id="container">
  93.   <div id="content">
  94.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  95.   </div>
  96.  
  97.   <!-- 
  98.   * Needed because container is floated left. If you don't clear footer won't show in Safari
  99.   * Only needed if floating
  100.   http://veerle.duoh.com/index.php/blog/comments/fun_with_floats/  -->
  101.   <div class="clear">&nbsp;</div>  
  102. </div>
  103.  
  104. <!-- Begin Footer -->
  105. <div id="footer">
  106.   <h2>Subliminial Footer Message</h2>
  107. </div>
  108. <!-- End Footer -->
  109.  
  110. </body>
  111. </html>

Report this snippet 

You need to login to post a comment.