日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

          
    
          
        
          歡迎訪問 生活随笔！
          
        
          
            
            
        
          
        
          
        
          
            
          生活随笔
          
            
            
        
          
    
          
    
          
    
          
    
          
        
          
            
          
                
                    當前位置：
                    首頁 >
                            前端技术
>                            CSS
>内容正文                
                        
          CSS
          
            
          
                    
          
                        
          CSS：页脚紧贴底部
          
                        
          
                            發布時間：2023/12/10
                            
 CSS                             
                            
                                27
                            
                            豆豆
                        
          
                        
          
                                                            生活随笔
收集整理的這篇文章主要介紹了
                                CSS：页脚紧贴底部
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.                        
          
                                
          
                                    



                                
          
                        
          
                            
                            
                            
          2019獨角獸企業重金招聘Python工程師標準>>>  
            
          我的練習來源于《CSS揭秘》這本書第7章-41緊貼底部的頁腳這部分內容以及書中提到的鏈接。
           
          方案一
           
          描述：以下方案簡單、干凈、現代并且沒有hack，適用于IE8+, Chrome, Firefox, Opera等瀏覽器；不需要使用任何標簽包裹，因為它是基于可變的body高度；這個解決方案誕生于2012年初，今天也許應該使用更好的方案比如flexbox。
           <!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>css緊貼底部的頁腳</title>
</head>
<style type="text/css">
/*footer緊貼底部的主要代碼*/
html{position: relative;min-height: 100%; 
}
body{margin: 0 0 100px;
}
footer{position: absolute;left: 0;bottom: 0;height: 50px;width: 100%;background-color: green;/*設置顏色方便查看footer位置*/
}
/*調整內容的高度以查看footer緊貼底部的效果*/
.content{height: 100px;
}	
</style>
<body><div class="content"></div><footer></footer>
</body>
</html> 
          ?
           
          方案二
           
          描述：使用display的flex屬性
           <!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>css緊貼底部的頁腳</title>
</head>
<style type="text/css">
/*footer緊貼底部的主要代碼*/
body{margin: 0;display: flex;min-height: 100vh;flex-direction: column;
}
footer{height: 50px;width: 100%;background-color: green;/*設置顏色方便查看footer位置*/
}
.content{flex: 1;
}	
</style>
<body><div class="content"></div><footer></footer>
</body>
</html> 
          ?
           
          方案三
           
          描述：使用?calc()方法
           <!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>css緊貼底部的頁腳</title>
</head>
<style type="text/css">
/*footer緊貼底部的主要代碼*/
body{margin: 0;
}
footer{height: 50px;width: 100%;background-color: green;/*設置顏色方便查看footer位置*/
}
.content{min-height: calc(100vh - 50px);
}	
</style>
<body><div class="content"><div style="height:1000px;">這個div用來撐高度的</div></div><footer></footer>
</body>
</html> 
          （未完待續……）
           
          參考：
           
        1. http://mystrd.at/modern-clean-css-sticky-footer/【Modern Clean CSS “Sticky Footer”】
        2. https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/【Sticky Footer】
        3. http://blog.sina.com.cn/s/blog_4c1e6a010102v6jp.html【vh是相對視口的高度】
          4.      
 

          轉載于:https://my.oschina.net/u/1165991/blog/746765
          
                            
          總結
          
                            
          
                                以上是生活随笔為你收集整理的CSS：页脚紧贴底部的全部內容，希望文章能夠幫你解決所遇到的問題。
                            
          
                            
          
                                如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。