CSS 粘性CSS页脚

Posted 2021-05-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 粘性CSS页脚相关的知识，希望对你有一定的参考价值。

Sample HTML...
&lt;div id=&quot;wrap&quot;&gt;
	&lt;div id=&quot;header&quot;&gt;&lt;/div&gt;
	&lt;div id=&quot;main&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;footer&quot;&gt;&lt;/div&gt;

...and the CSS
html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 

/*Opera Fix*/
body:before {
	content:&quot;&quot;;
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

以上是关于CSS 粘性CSS页脚的主要内容，如果未能解决你的问题，请参考以下文章