国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > HTML > 正文

html的footer置于頁面最底部的簡單實現方法

2019-10-26 17:18:11
字體:
來源:轉載
供稿:網友

需求:有時候,當頁面內容較短,撐不開瀏覽器高度,但是又希望footer能在窗口最低端。

思路:footer的父層的最小高度是100%,footer設置成相對于父層位置絕對(absolute)置底(bottom:0),父層內要預留footer的高度。

html代碼:

  • <!-- 父層 -->      <div id="wapper">     
  •     <!-- 主要內容 -->          <div id="main-content">     
  •     </div>          <!-- 頁腳 -->     
  •     <div id="footer">          </div>     
  • </div>     
  • CSS如下:

    CSS Code復制內容到剪貼板
  • #wapper{          position: relative;   /*重要!保證footer是相對于wapper位置絕對*/     
  •     height: auto;          /* 保證頁面能撐開瀏覽器高度時顯示正常*/          min-height: 100%  /* IE6不支持,IE6要單獨配置*/     
  • }      #footer{     
  •    position: absolute;  bottombottom: 0; /* 關鍵 */         left:0; /* IE下一定要記得 */     
  •    height: 60px;         /* footer的高度一定要是固定值*/      }     
  • #main-content{         padding-bottom: 60px; /*重要!給footer預留的空間*/     
  • }     

    這時候,其它瀏覽器上都能正常顯示了,但是IE 6要另外處理:

    CSS Code復制內容到剪貼板
  • <!--[if IE 6]->      <style>     
  • #wapper{height:100%;} /* IE在高度不夠時會自動撐開層*/      </style>     
  • <![endif]-->     

    以上這篇html的footer置于頁面最底部的簡單實現方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林站長站。

  • 發表評論 共有條評論
    用戶名: 密碼:
    驗證碼: 匿名發表

    圖片精選

    主站蜘蛛池模板: 来安县| 岳阳县| 安阳县| 博野县| 黄浦区| 宝丰县| 昌图县| 湘乡市| 永济市| 胶州市| 五家渠市| 鲁山县| 西贡区| 基隆市| 巴塘县| 昌图县| 博乐市| 龙里县| 双流县| 连平县| 黄浦区| 钦州市| 保德县| 屏南县| 临洮县| 繁昌县| 思茅市| 阳东县| 洪洞县| 建宁县| 永定县| 迁安市| 烟台市| 德江县| 麻江县| 赣州市| 江达县| 镇原县| 汝阳县| 克东县| 常山县|