footer始终居于底部

最新推荐文章于 2024-09-17 16:06:02 发布

邮菜花2013

最新推荐文章于 2024-09-17 16:06:02 发布

阅读量300

点赞数

分类专栏： css 文章标签：前端布局 html

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们在布局的时候有这样一种情况，就是当页面高度没有超过屏幕高度的时候，footer要固定到底部，而当页面超出满屏的高度的时候，footer要随着高度走。下面我们就通过CSS实现这一效果：

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
         13 
       
         14 
       
         15 
       
         16 
       
         17 
       
         18 
       
         19 
       
         20 
       
         21 
       
         22 
       
         23 
       
         24 
       
         25 
       
         26 
       
         27 
       
         28 
       
         29 
       
         30 
       
         31 
       
         32 
       
         33 
       
         34 
       
         35 
       
         36 
       
         37 
       
         38 
       
         39 
       
         40 
       
         41 
       
         42 
       
         43 
       
         44 
       
         45 
       
         46 
       
         47 
       
         48 
       
         49 
       
         50 
       
         51 
       
         52 
       
         53 
       
         54 
       
        <!DOCTYPE HTML> 
       
        <html> 
       
        <head> 
       
        <meta  
        charset 
        = 
        "utf-8" 
        > 
       
        <title> 
        footer始终居于底部 
        </title> 
       
        <style type="text/css"> 
       
        *  
        { 
          
        margin 
        : 
        0 
        ; 
          
        padding 
        : 
        0 
        ; 
          
        } 
       
        body  
        { 
          
        font 
        : 
        14px/1.8 
          
        arial 
        ; 
          
        } 
       
        html, body, .wrap  
        { 
          
        height 
        : 
        100% 
        ; 
          
        } 
       
        .wrap  
        { 
       
        height 
        : 
        auto 
        ; 
          
        min-height 
        : 
        100% 
        ; 
          
        _height 
        : 
        100% 
        ; 
          
        background 
        : 
        #CCC 
        ; 
          
        color 
        : 
        #fff 
        ; 
          
        font-size 
        : 
        18px 
        ; 
          
        text-align 
        : 
        center 
        ; 
          
        } 
       
        .main  
        { 
          
        padding-bottom 
        : 
        80px 
        ; 
          
        } 
       
        .footer  
        { 
          
        position 
        : 
        relative 
        ; 
          
        height 
        : 
        80px 
        ; 
          
        line-height 
        : 
          
        80px 
        ; 
          
        margin-top 
        : 
        -80px 
        ; 
          
        background 
        : 
        #333 
        ; 
          
        color 
        : 
        #fff 
        ; 
          
        font-size 
        : 
        16px 
        ; 
          
        text-align 
        : 
        center 
        ; 
          
        } 
       
        </style> 
       
        </head> 
       
        <body> 
       
        <div  
        class 
        = 
        "wrap" 
        > 
       
        <div  
        class 
        = 
        "main" 
        > 
       
        <h1> 
        七七事变祭 
        </h1> 
       
        <p> 
        中华民族创辉煌， 
        </p> 
          
        <p> 
        倭寇菲佣心中慌。 
        </p> 
          
        <p> 
        为虎作伥傍老美， 
        </p> 
          
        <p> 
        东海南海滋事狂。 
        </p> 
          
        <br  
        /> 
       
        <p> 
        历史潮流不可挡， 
        </p> 
          
        <p> 
        中华儿女当自强。 
        </p> 
          
        <p> 
        警钟长鸣记国耻， 
        </p> 
       
        <p> 
        发展经济强国防。 
        </p> 
       
        <br  
        /> 
       
        <p> 
        七七事变77周年，勿忘国耻，振兴中华！！！ 
        </p> 
       
        <br  
        /> 
            
        </div> 
       
        </div> 
       
        <div  
        class 
        = 
        "footer" 
        > 
       
        <h1> 
        页面高度不满，底部固定 
        </h1> 
       
        </div> 
       
        </body> 
       
        </html>