CSS基础-footer元素始终粘在浏览器底部的四种方法

>>最全面的Java面试大纲及答案解析(建议收藏)  

本文介绍底部footer元素如何始终粘在浏览器底部。当内容container足够多、可以撑开一屏的时候,底部footer紧跟在内容container后边;而内容container不够多、不足以撑开一屏到达浏览器底部时,底部footer仍然在浏览器底部。需求看下图:(原谅我用了简单粗暴的三原色 ̄□ ̄||

CSS基础-footer元素始终粘在浏览器底部的四种方法

注:文中所有关键代码写在了 /* key code */里,背景色background-color为辅助调试代码,没有实质用途。

方法一

包裹元素wrapper设置负的margin-bottom等于底部footer高度,内容container后加一个空的占位元素blank。

html和body设置height为100%;用一个包裹元素wrapper包住除了底部footer之外的所有内容container,给包裹元素wrapper设置min-height为100%、设置负的margin-bottom等于底部footer的高度;内容container后加一个空的占位元素blank,高度和底部footer一样,防止底部footer盖住内容container。

HTML代码:

    <body>
       <div class="wrapper">
           <div class="container">container</div>
           <div class="blank"></div>
       </div>
   </body>    

CSS代码:

            html, 
           body {
               /* key code */
               height: 100%;
               /* key code */
               margin: 0;
               text-align: center;
           }
           .wrapper {
               /* key code */
               min-height: 100%;
               margin-bottom: -50px;
               /* key code */
           }
           .container {
               background-color: #ff0000;
           }
           .blank, .footer {
               /* key code */
               height: 50px;
               /* key code */
           }
           .blank {
               background-color: #0000ff;
           }
           .footer {
               background-color: #ffff00;
           }  

方法二

内容container设置padding-bottom等于底部footer的高度,底部footer设置负的margin-top等于底部footer的高度。

html和body设置height为100%;用一个包裹元素wrapper包住除了底部footer之外的所有内容container,给包裹元素wrapper设置min-height为100%;内容container设置padding-bottom等于底部footer的高度;底部footer设置负的margin-top等于底部footer的高度。

HTML代码:

    <body>
       <div class="wrapper">
           <div class="container">container</div>
       </div>
       <div class="footer">footer</div>
   </body>

CSS代码:

           html, 
          body {
               /* key code */
               height: 100%;
               /* key code */
               margin: 0;
               text-align: center;
           }
           .wrapper {
               /* key code */
               min-height: 100%;
               /* key code */
           }
           .container {
               /* key code */
               padding-bottom: 50px;
               /* key code */
               background-color: #ff0000;
           }
           .footer {
               /* key code */
               height: 50px;
               margin-top: -50px;
               /* key code */
               background-color: #ffff00;
           }

方法三

使用flexbox布局。

html设置height为100%;body使用flexbox布局、设置min-heigint为100%;内容container设置flex为1,意在内容container分配body除去底部footer后的全部剩余空间。

HTML代码:

    <body>
       <div class="container">container</div>
       <div class="footer">footer</div>
   </body>

CSS代码:

            html, 
           body {
               margin: 0;
               text-align: center;
           }
           html {
               /* key code */
               height: 100%;
               /* key code */
           }
           body {
               /* key code */
               min-height: 100%;
               display: flex;
               flex-direction: column;
               /* key code */
           }
           .container {
               /* key code */
               flex: 1;
               /* key code */
               background-color: #ff0000;
           }
           .footer {
               height: 50px;
               background-color: #ffff00;
           }

方法四

使用calc()计算内容container的最小高度

html设置height为100%;使用calc()计算内容container的最小高度,设置内容container的min-height为(100vh - 底部footer的高度)。

HTML代码:

     <body>
       <div class="container">container</div>
       <div class="footer">footer</div>
   </body>

CSS代码:

            html, 
           body {
               /* key code */
               height: 100%;
               /* key code */
               margin: 0;
               text-align: center;
           }
           .container {
               /* key code */
               min-height: calc(100vh - 50px);
               /* key code */
               background-color: #ff0000;
           }
           .footer {
               /* key code */
               height: 50px;
               /* key code */
               background-color: #ffff00;
           }

方法三和方法四用到了CSS3的新属性,会有部分低版本浏览器不支持。


CSS基础-footer元素始终粘在浏览器底部的四种方法感谢阅读~

dvdf


始发于微信公众号: 前端麻辣烫