一道经典的css面试题。固定底部（sticky footer）

作者: 阳光之城alt | 来源:发表于2018-05-31 16:39 被阅读19次

一道经典的css面试题。固定底部（sticky footer）
CSS方案总结
css sticky footer经典布局
CSS Footer固定底部处理
css实现Sticky Footer
sticky-footer布局的方法
CSS Sticky Footer
Sticky footer 页面底部
【css】footer固定在页面底部
flex常用布局

image

image.png

 <!--遮罩层  css Sticky footer布局-->
    <div class="detail" v-show="detailshow">
            <div class="deta-wrapper clearfix">
                 <div class="detail-main">
                          <h1 class="name">{{seller.name}}</h1>
                         <star :size="48" :score="seller.score"></star>
                 </div>
            </div>
          <div class="detail-close">
            <i class="icon-close"></i>
          </div>
    </div>

css

.detail{  //遮罩层 
                    position: fixed;
                    top: 0;
                    left: 0;
                    z-index: 100;
                    width: 100%;
                    height: 100%;
                    overflow: auto;
                    background: rgba(7,17,27,0.8);
                    .deta-wrapper{ //
                        min-height: 100%;
                        width: 100%;
                    }
                    .detail-main{
                         margin-top: 64px;
                         padding-bottom: 64px;
                         .name{
                            line-height: 16px;
                            text-align: center;
                            font-size: 16px;
                            font-weight: 700;
                         }
                    }
                }
                .detail-close{
                    position: relative;
                    width: 32px;
                    height: 32px;
                    margin: -64px auto 0 auto;
                    clear: both;
                    font-size: 32px;
                }
            }

<div class="content-wrapper">  
        <div class="content">  
            <p>I'm contented!</p>  
            <!-- put your html in here -->  
        </div>  
    </div>  
    <div class="footer">  
        <span>close</span>  
    </div>

css

body,html{  
            margin: 0;  
            padding: 0;  
            height: 100%;  
  
        }  
        p{  
            font-size: 2em;  
        }  
        .content-wrapper{  
            overflow: auto;  
            min-height: 100%;  
            background-color: rgba(0,0,0,.5);  
        }  
        .content-wrapper .content{  
            padding-bottom: 64px;  
            text-align: center;  
        }  
        .footer{  
            margin-top: -46px;  
            height: 46px;  
            width: 100%;  
            text-align: center;  
        }  
        .footer span{  
            padding: 5px 10px;  
            background-color: red;  
            border-radius: 5px;  
        }

有遮罩层的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="sd">
            <div class="content-wrapper">  
                <div class="content">  
                    <p>I'm contented!</p>  
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <p>I'm contented!01</p>
                    <!-- put your html in here -->  
                </div>  
           </div>  
               <div class="footer"> <span>close</span> </div>
        </div>
    

        
        <style>
            body,html{  
            margin: 0;  
            padding: 0;  
            
  
        }  
        p{  
            font-size: 2em;  
        }  
        .sd{ position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.5);  
            overflow: auto; 
            }
            
        .content-wrapper{  
            min-height: 100%;  
        }  
        .content-wrapper .content{  
            padding-bottom: 64px;  
            text-align: center;  
        }  
        .footer{  
            margin-top: -64px;  
            height: 46px;  
            width: 100%;  
            text-align: center;  

           
        }  
        .footer span{  
            padding: 5px 10px;  
            background-color: red;  
            border-radius: 5px;  
        }  
                   
                
                
        </style>
        
    </body>
</html>

参考网址:https://blog.csdn.net/u011456552/article/details/55805480