raamwerk sticky footer center 3科洛门分部

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了raamwerk sticky footer center 3科洛门分部相关的知识，希望对你有一定的参考价值。

  1. /*CSS*/
  2. /  RESET
  3. ******************************/
  4. html, body, div, span, applet, object, iframe, table, caption, tbody,
  5. tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp,
  6. small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p,
  7. blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd,
  8. ol, ul, li, fieldset, form, label, legend{
  9. 	vertical-align: baseline;
  10. 	font-family: inherit;
  11. 	font-weight: inherit;
  12. 	font-style: inherit;
  13. 	font-size: 100%;
  14. 	outline: 0;
  15. 	padding: 0;
  16. 	margin: 0;
  17. 	border: 0;}
  18.  
  19. body{line-height: 1;}
  20. ol, ul{list-style: none;}
  21. table{border-collapse: separate; border-spacing: 0;}
  22. caption, th, td{font-weight: normal; text-align: left;}
  23. a img, :link img, :visited img {border: none;}
  24. div#printheader{display: none;}
  25.  
  26. div.clear{
  27. 	clear: both;
  28. 	width: 100%;
  29. 	height: 1px;
  30. 	overflow: hidden;}
  31.  
  32.  
  33. /* sticky footer */
  34. * {margin:0;padding:0;} 
  35.  
  36. /* must declare 0 margins on everything, also for main layout components use padding, not 
  37. vertical margins (top and bottom) to add spacing, else those margins get added to total height 
  38. and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
  39.  
  40. html, body {
  41. height:100%; /* gives layout 100% height */
  42. overflow:inherit; /* triggers 100% height in Opera 9.5 */
  43. }
  44. #wrapper {
  45. min-height:100%; /* gives layout 100% height */
  46. }
  47. * html #wrapper { 
  48. height:100%; /* IE6 treats height as min-height */
  49. }
  50.  
  51. div#paddingWrapper{
  52.  
  53. float:left;
  54. display:inline;
  55. background-color:green;
  56. padding:10px 5px 0px 5px;
  57. *padding:10px 5px 40px 5px;}/* bottom padding clears the #footer in IE */
  58.  
  59. #footer {
  60. position:relative;
  61. clear:both;
  62. height:40px;
  63. margin:-40px auto 0; /* -80px sucks it back into the #wrapper */
  64. }
  65.  
  66. #wrapper {
  67. width:1000px; /* centered div must be given a width */
  68. margin:0 auto; /* centers #wrapper */
  69. }
  70. #footer {
  71. width:1000px; /* centered div must be given a width */
  72. margin:-40px auto 0; /* auto left/right centers it */
  73. }
  74.  
  75.  
  76. /* CLEAR FIX*/
  77. .clearfix:after {content: ".";
  78. 	display: block;
  79. 	height: 0;
  80. 	clear: both;
  81. 	visibility: hidden;}
  82. .clearfix {display: inline-block;}
  83. /* Hides from IE-mac */
  84. * html .clearfix { height: 1%;}
  85. .clearfix {display: block;}
  86. /* End hide from IE-mac */
  87.  
  88.  
  89. /* LAYOUT
  90. ******************************/
  91.  
  92.  
  93. div#header{
  94. 	z-index:2;
  95. 	background-color:red;
  96. 	width:990px;
  97. 	height:315px;}
  98.  
  99. div#logo{
  100. 	position:relative;
  101. 	float:left;
  102. 	z-index:3;
  103. 	background-color:yellow;
  104. 	top:0px;
  105. 	left:0;
  106. 	width:245px;
  107. 	height:135px;}
  108.  
  109. div#zoeken{
  110.  
  111. 	float:right;
  112. 	top:-67px;
  113. 	width:240px;
  114. 	height:30px;
  115. 	background-color:white;}
  116.  
  117. div#topmenu{
  118. 	positioin:relative;
  119. 	z-index:99;
  120. 	margin-top:20px;
  121. 	background-color:blue;
  122. 	width:990px;
  123. 	height:30px;}
  124.  
  125. div#leftcol{
  126. 	display: inline;
  127. 	z-index:4;
  128. 	width: 258px;
  129. 	float: left;
  130. 	background-color:black;}	
  131.  
  132. div#middlecol{
  133. 	display: inline;
  134. 	float:left;
  135. 	width: 504px;
  136. 	background-color:#CCFF00;}
  137.  
  138. div#rightcol{
  139. 	display: inline;
  140. 	width: 228px;
  141. 	float: left;
  142. 	background-color:#FFCC33;}	
  143.  
  144.  
  145.  
  146. /* TEKST
  147. ******************************/
  148. body{
  149. 	font: normal 10px/17px Verdana, Arial, sans-serif;
  150. 	color: #000;}
  151.  
  152. div#footer{
  153. 	font: normal 10px/17px Verdana, Arial, sans-serif;
  154. 	color: #666;}
  155.  
  156.  
  157. /* paragraaf */
  158. p{padding: 0 0 10px}
  159. div#homebox_1 p, div#homebox_2 p{padding: 0 10px 10px;}
  160. strong{color: #000; font-weight: bold;}
  161.  
  162.  
  163.  
  164.  
  165.  
  166. /* titels */
  167. h1, h2, h3{
  168. 	letter-spacing: -1px;
  169. 	margin: 0 0 10px;
  170. 	padding: 0;
  171. 	clear: both;}
  172.  
  173. h1{	font: normal 32px/32px Verdana, Arial, sans-serif;
  174. 	color: #fff;
  175. 	text-align: right;}
  176.  
  177. h2{	font: bold 20px/24px Verdana, Arial, sans-serif;
  178. 	color: #ffffff;}
  179.  
  180. h3{	font: normal 18px/22px Verdana, Arial, sans-serif;
  181. 	color: #ffffff;}
  182.  
  183. /* opsommingen */
  184.  
  185. /* links */
  186.  
  187.  
  188.  
  189. /* AFBEELDINGEN */
  190.  
  191.  
  192.  
  193. }
  194.  
  195.  
  196. /* MENU'S
  197. ******************************/
  198.  
  199. /* ELEMENTEN
  200. ******************************/
  201.  
  202.  
  203. /* tabel */
  204. table{}
  205. caption{}
  206. thead{}
  207. tfoot{}
  208. tbody{}
  209. th{}
  210. tr{}
  211. td{}
  212.  
  213. /* toggle */
  214.  
  215.  
  216.  
  217. /*sitemap*/
  218.  
  219.  
  220. /*HTML************************************/
  221.  
  222. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  223.  
  224. <html>
  225. <head>
  226.  
  227.  
  228. <title> test</title>
  229.  
  230. <link rel="stylesheet" type="text/css" href="stylesheet.css">
  231.  
  232. </head>
  233. <body>
  234.  
  235.  
  236. <div id="wrapper" style="background-color:pink;">
  237.  
  238.  <div id="paddingWrapper">
  239.  
  240.   <div id="header">
  241.    <div id="logo"></div><!--logo-->
  242.   </div><!--header-->
  243.  
  244.  
  245.  
  246.   <div id="topmenu">df</div><!--topmenu-->
  247.  
  248.    <div id="leftcol">
  249.    sdf<br />	sdf<br />
  250.    </div><!-- leftcol-->
  251.       <div id="middlecol">
  252.       sdf<br />	sdf<br />	
  253.       </div><!--middlecol-->
  254.  
  255.    <div id="rightcol">
  256.  
  257.    </div><!--rightcol--> 
  258.  
  259.  
  260.  
  261.  
  262.  
  263. </div><!--paddingWrapper-->
  264.  
  265. </div><!-- wrapper -->
  266.  
  267. <div id="footer" style="background-color:yellow;"></div><!-- #footer sits outside the #wrapper -->
  268.  
  269.  
  270.  
  271.  
  272.  
  273.  
  274.  
  275. </body>
  276. </html>

以上是关于raamwerk sticky footer center 3科洛门分部的主要内容，如果未能解决你的问题，请参考以下文章

Sticky footer实现

css CSS Sticky Fixed Footer #CSS #footer #fixed

sticky footer布局，定位底部footer

html sticky.footer.html

scss sticky_footer.js

CSS Sass Sticky Footer Mixin