成都创新互联网站制作重庆分公司

怎么利用CSS使footer固定在页面底部

这篇文章主要介绍“怎么利用CSS使footer固定在页面底部”,在日常操作中,相信很多人在怎么利用CSS使footer固定在页面底部问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么利用CSS使footer固定在页面底部”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

成都创新互联公司是专业的绥阳网站建设公司,绥阳接单;提供网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行绥阳网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

1. HTML基本结构

XML/HTML Code复制内容到剪贴板

  1.   

  2.   

  3.   

  4.   

  5.   

  6.   

  7.     layout  

  8.   

  9.   

  10.   

  11.   

  12.   

  13.       

  14.   

  15.         

    head of your website.

      

  16.   

  17.     

  

  •   

  •       

  •   

  •           

  •   

  •             

    Your website content here.

      

  •   

  •               

  •   

  •                 for(var i = 0; i<100;i++){   

  •   

  •                     document.write(i + "");   

  •   

  •                 }   

  •   

  •               

  •   

  •         

  •   

  •   

  •         

  •   

  •   

  •       

  •   

  •       

  •   

  •         

      

  •   

  •             Copyright (c) 2012  

  •   

  •       

  •   

  •   

  •   

  •   

  •   

  • 2. CSS样式

    CSS Code复制内容到剪贴板

    1.   

    2.   

    3.         *{   

    4.   

    5.             margin: 0;/* 把默认值都设为0 */  

    6.   

    7.         }   

    8.   

    9.         html, body   

    10.   

    11.         {   

    12.   

    13.             height: 100%;   

    14.   

    15.             width:85%;   

    16.   

    17.             margin:0auto;/* 居中 */  

    18.   

    19.         }   

    20.   

    21.            

    22.   

    23.         .header   

    24.   

    25.         {   

    26.   

    27.             height:100px;   

    28.   

    29.             background-color:Fuchsia;   

    30.   

    31.         }   

    32.   

    33.            

    34.   

    35.         .wrapper   

    36.   

    37.         {   

    38.   

    39.             min-height: 100%;/* IE6 hack*/  

    40.   

    41.             height: auto!important;/* height优先级 */  

    42.   

    43.             height: 100%;   

    44.   

    45.             margin: 0auto-4em;/* 负值必须等于footer的高度 */  

    46.   

    47.         }   

    48.   

    49.            

    50.   

    51.         .content  

    52.   

    53.         {   

    54.   

    55.             background-color:Silver;   

    56.   

    57.         }   

    58.   

    59.            

    60.   

    61.         .clear/* 清除浮动 */  

    62.   

    63.         {   

    64.   

    65.             height: 4em; /* clear的height必须和footer的值样高 */  

    66.   

    67.             clear:both;   

    68.   

    69.         }   

    70.   

    71.            

    72.   

    73.         .footer   

    74.   

    75.         {   

    76.   

    77.             height: 4em;   

    78.   

    79.             background-color:Aqua;   

    80.   

    81.         }   

    82.   

    83.        

    到此,关于“怎么利用CSS使footer固定在页面底部”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


    网站栏目:怎么利用CSS使footer固定在页面底部
    链接URL:http://cxhlcq.com/article/iicjes.html

    其他资讯

    在线咨询

    微信咨询

    电话咨询

    028-86922220(工作日)

    18980820575(7×24)

    提交需求

    返回顶部