如何用CSS把层固定在整个网页的最底部？ 如何用CSS把层固定在整个网页的最底部?
\u5982\u4f55\u7528CSS\u628a\u5c42\u56fa\u5b9a\u5728\u6574\u4e2a\u7f51\u9875\u7684\u6700\u5e95\u90e8\uff1f\u6253\u5f00\u4e00\u4e2a\u7f16\u8f91\u8f6f\u4ef6\u8bbe\u7f6e\u4e00\u4e0bcss\u4e0ediv\u533a\u57df\uff0c\u4f7f\u5176\u56fa\u5b9a\u5728\u9875\u9762\u7684\u5e95\u90e8\u3002
\u5176\u4e3b\u8981\u5c5e\u6027\uff1aposition:fixed; \u7edd\u5bf9\u5b9a\u4f4d\u751f\u6210\u7edd\u5bf9\u5b9a\u4f4d\u7684\u5143\u7d20\uff0c\u76f8\u5bf9\u4e8e\u6d4f\u89c8\u5668\u7a97\u53e3\u8fdb\u884c\u5b9a\u4f4d\u3002
\u7f51\u9875\u4e2d\u5b9e\u73b0\u6548\u679c\u5982\u4e0b\uff1a
\u6269\u5c55\uff1a\u8fd8\u6709\u4e00\u79cd\u5b9a\u4f4d\u65b9\u5f0f\u4e3a\uff1aposition:absolute\u5982\u4e0a\u4f8b\u65b9\u5f0f\u6d4f\u89c8\u5668\u6ed1\u52a8\u7684\u65f6\u5019\uff0c\u5b83\u4f1a\u968f\u7740\u6d4f\u89c8\u5668\u6eda\u52a8\u6761\u800c\u6eda\u52a8\uff1b\u800cposition:absolute\u5219\u4e0d\u4f1a\u3002
css\u7684\u7279\u70b9\uff1a
\u7ed3\u6784\u4e0e\u6837\u5f0f\u5206\u79bb\u7684\u65b9\u5f0f,\u4fbf\u4e8e\u540e\u671f\u7ef4\u62a4\u4e0e\u6539\u7248;
\u6837\u5f0f\u5b9a\u4e49\u7cbe\u786e\u5230\u50cf\u7d20\u7684\u7ea7\u522b;
\u53ef\u4ee5\u7528\u591a\u5957\u6837\u5f0f,\u4f7f\u7f51\u9875\u6709\u4efb\u610f\u6837\u5f0f\u5207\u6362\u7684\u6548\u679c\uff1b(\u5982:www.YOUKU.COM\u7684\u5f00,\u5173\u706f\u6548\u679c)
\u964d\u4f4e\u670d\u52a1\u5668\u7684\u6210\u672c\u3002
function diff(x){
ie4=(document.all)?true:false
if (ie4){
block=x.style;
}
var a=screen.width
switch (a){
case 1024:
block.left=""+(parseInt(block.left)+112);
break;
case 1152:
block.left=""+(parseInt(block.left)+176);
break;
case 1280:
block.left=""+(parseInt(block.left)+240);
break;
}}
\u5c42\u7684\u5185\u5bb9
diff(mooon)
\u6ce8\u610f\uff1a\u4e0a\u9762\u8fd9\u79cd\u65b9\u6cd5\u80fd\u5b9e\u73b0\u5c42\u7684\u56fa\u5b9a\uff0c\u4f46\u6709\u4e00\u4e2a\u95ee\u9898\u662f\u8981\u56fa\u5b9a\u7684\u8fd9\u4e2a\u5c42\u4f1a\u72ec\u5360\u7528\u9ad8\u5ea6\uff0c\u4ee5\u4e0b\u7684\u65b9\u6cd5\u53ef\u4ee5\u89e3\u51b3\uff1a
\u5185\u5bb9
\u3000\u3000\uff1c\uff0fdiv\uff1e
\u8fd9\u4e9b\u4ee3\u7801\u53ef\u4ee5\u8ba9\u5c42\u56fa\u5b9a\u663e\u793a
<body>
<DIV id="container">
<DI id="content">
<h1>Content</h1>
<p>请改变浏览器窗口的高度，以观察footer效果。</p>
<p>这里是示例文字，DIV固定………，这里是示例文字。</p>
</DIV>
<DIV Vid="footer">
<h1>Footer</h1>
</DIV>
</DIV>
</body>
CSS代码：
程序代码
body,html{
margin:0;
padding:0;
font:12px/1.5arial;
height:100%;
}
#container{
min-height:100%;
position:relative;
}
#content{
padding:10px;
padding-bottom:60px;
/*20px(font-size)
x2(line-height)+10px(padding)x2=60px*/
}
#footer{
position:absolute;
bottom:0;
padding:10px0;
background-color:#AAA;
width:100%;
}
#footerh1{
font:20px/2Arial;
margin:0;
padding:010px;
}
打开一个编辑软件设置一下css与div区域，使其固定在页面的底部。
其主要属性：position:fixed; 绝对定位生成绝对定位的元素，相对于浏览器窗口进行定位。
网页中实现效果如下：
扩展：还有一种定位方式为：position:absolute如上例方式浏览器滑动的时候，它会随着浏览器滚动条而滚动；而position:absolute则不会。
绛旓細鎵撳紑涓涓紪杈戣蒋浠惰缃竴涓媍ss涓巇iv鍖哄煙锛屼娇鍏跺浐瀹氬湪椤甸潰鐨勫簳閮銆傚叾涓昏灞炴э細position:fixed; 缁濆瀹氫綅鐢熸垚缁濆瀹氫綅鐨勫厓绱狅紝鐩稿浜庢祻瑙堝櫒绐楀彛杩涜瀹氫綅銆傜綉椤典腑瀹炵幇鏁堟灉濡備笅锛氭墿灞曪細杩樻湁涓绉嶅畾浣嶆柟寮忎负锛歱osition:absolute濡備笂渚嬫柟寮忔祻瑙堝櫒婊戝姩鐨勬椂鍊欙紝瀹冧細闅忕潃娴忚鍣ㄦ粴鍔ㄦ潯鑰屾粴鍔紱鑰宲osition:absolute鍒欎笉浼氥...
绛旓細鐩存帴鐢╟ss灏卞彲浠ユ帶鍒跺唴宓岀殑閭ｄ釜div浼氭牴鎹閮╠iv鐨勫搴﹀拰楂樺害濮嬬粓鍋滅暀鍦ㄨ瀹瑰櫒鐨勫彸涓嬭銆傚仠鐣欎綅缃彲浠ユ牴鎹嚜宸遍渶瑕佽皟鏁 鐑績缃戝弸| 鍙戝竷浜2013-03-29 涓炬姤| 璇勮 0 3 function diff(x){ie4=(document.all)?true:falseif (ie4){block=x.style;}var a=screen.widthswitch (a){ case 1024: block.left=...
绛旓細寤虹珛css鏂囦欢,姣斿鍐呭濡備笅 h3 { font-size:14px;color:red;font-weight:700;} 淇濆瓨css鏂囦欢涓簊tyle.css 鍦html涓姞鍏ュ涓嬩唬鐮 灏卞彲浠ュ疄鐜板湪鎵鏈椤甸潰閮芥樉绀篶ss鏍峰紡
绛旓細5銆乮nherit锛氳瀹氬簲璇ヤ粠鐖跺厓绱犵户鎵 position 灞炴х殑鍊笺傚皬妗堜緥锛歨2.pos_abs{position:absolute;left:100px;top:150px}杩欐槸甯︽湁缁濆瀹氫綅鐨勬爣棰橈紙鐧惧害鐭ラ亾锛夐氳繃缁濆瀹氫綅锛屽厓绱犲彲浠ユ斁缃鍒伴〉闈涓婄殑浠讳綍浣嶇疆銆備笅闈㈢殑鏍囬璺濈椤甸潰宸︿晶 100px锛岃窛绂婚〉闈㈤《閮 150px銆傛渚嬫埅鍥撅細...
绛旓細瑕css 搴曢儴鍥哄畾闇瑕佷袱閮ㄥ垎浠ｇ爜锛歨tml浠ｇ爜銆乧ss浠ｇ爜 1銆乭tml浠ｇ爜锛 2銆乧ss浠ｇ爜锛.container{ padding-bottom:30px; /*闇瑕 >= footer鐨刪eight鍊*/} .footer{ height:30px; position:fixed; bottom:0px; z-index:-1;}
绛旓細bold;}澹版槑鐢变袱閮ㄥ垎缁勬垚:灞炴(濡 font-family)鍜屽(濡 Helvetica)銆備笂杩扮ず渚嬩负 H1 鏍囩鍒涘缓浜嗘牱寮:閾炬帴鍒版鏍峰紡鐨勬墍鏈 H1 鏍囩鐨勬枃鏈兘灏鏄 16 鍍忕礌澶у皬骞朵娇鐢 Helvetica 瀛椾綋鍜岀矖浣撱傛湳璇"灞傚彔"鏄寚瀵瑰悓涓涓厓绱犳垨 Web 椤甸潰搴旂敤澶氫釜鏍峰紡鐨勮兘鍔涖備緥濡傦紝鍙互鍒涘缓涓涓 CSS 瑙勫垯鏉ュ簲鐢ㄩ鑹诧紝...
绛旓細1銆侀渶瑕浣跨敤鍥哄畾瀹氫綅鎵嶈兘鍋氬埌杩欐牱鐨勬晥鏋溿傚叿浣撴柟娉曟槸棣栧厛鎵撳紑html缂栬緫鍣紝棣栧厛璁剧疆涓涓鍣╠iv锛岀劧鍚庤缃竴涓敤鏉ユ紨绀烘晥鏋滅殑div锛屽垎鍒缃甤lass灞炴у悕涓篶ontainer鍜宖ixed锛2銆佸湪style鏍囩涓缃牱寮忥紝璁剧疆container鐨刾osition灞炴т负鐩稿瀹氫綅锛屽苟涓旂粰瀹冧竴涓緢楂樼殑楂樺害锛岀劧鍚庣粰fixed璁剧疆楂樺害鍜屽搴︼紝浠ュ強棰滆壊绛夊睘鎬э紝...
绛旓細1. 閾惧叆澶栭儴鏍峰紡琛 閾惧叆澶栭儴鏍峰紡琛ㄦ槸鎶婃牱寮忚〃淇濆瓨涓轰竴涓牱寮忚〃鏂囦欢锛岀劧鍚鍦ㄩ〉闈涓敤鏍囪閾炬帴鍒拌繖涓牱寮忚〃鏂囦欢锛岃繖涓爣璁板繀椤绘斁鍒伴〉闈㈢殑鍖哄唴锛屽涓嬶細 鈥︹ 鈥︹ 涓婇潰杩欎釜渚嬪瓙琛ㄧず娴忚鍣ㄤ粠mystyle.css鏂囦欢涓互鏂囨。鏍煎紡璇诲嚭瀹氫箟鐨勬牱寮忚〃銆俽el=鈥漵tylesheet鈥濇槸鎸囧湪椤甸潰涓娇鐢ㄨ繖涓閮ㄧ殑鏍峰紡琛ㄣ倀ype...
绛旓細锛1锛夆滃鑸爮涓嬫媺鑷充竴瀹氶珮搴﹀悗鍥哄畾鍦椤堕儴鐨勭壒鏁堚濓紝涔熸湁鍚屽鍠滄鍙窡闅忓鑸粈涔堢殑銆傚弽姝ｅ氨鏄繖涓箞鎰忔濄傚厛鐩存帴涓婁唬鐮侊細灏杩欎釜js鏀惧埌瑕佸疄鐜版晥鏋滅殑椤甸潰閲岄潰鍘伙紝鐒跺悗鎴戜滑瑕佷慨鏀圭殑鏄涓夎鐨.nav锛屸渘av鈥滄敼鎴愪綘鑷繁椤甸潰瀵艰埅鏍忕殑class锛涚涓冭鐨勨100鈥滀负涓嬫媺鍒100涓儚绱犵殑鏃跺欒Е鍙戠壒鏁堬紝鍙互鑷淇敼鑷...
绛旓細锛1锛変娇鐢‥mbed锛堝祵鍏ユ牱寮忓崟锛夋帓鐗堟牱寮忥細鍗冲皢CSS浠ｇ爜鐩存帴鎻掑叆姣忎釜椤甸潰鐨凥TML鐨勫尯锛屽氨璞′笂涓鑺傜湅鍒扮殑銆備娇鐢...鏍囩銆備緥濡傦細 <!-- h2 { font-family: "瀹嬩綋"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC} h1 { font-family: "Arial"; font-size: ...
