CSS全屏布局的5种方式-小火柴的蓝色理想

目录

前面的话

　　全屏布局在实际工作中是很常用的，比如管理系统、监控平台等。本文将介绍关于全屏布局的5种思路

思路一: float

【1】float + calc

　　通过calc()函数计算出.middle元素的高度，并设置子元素高度为100%

 

 
top
 
 
 

 

 
left
 
 

 

 
right
 
 
 
 
 

 
bottom
 
 

【2】float + absolute + (fix)

　　通过增加结构来提高兼容性，.middle元素设置100%的高度，.top和.bottom设置absolute覆盖在.middle上

 

 
top
 
 
 

 

 

 
left
 
 

 

 
right
 
 
 
 
 
 
 

 
bottom
 
 

思路二: inline-block

【1】inline-block + calc

 

 
top
 
 
 

 

 
left
 
 

 

 
right
 
 
 
 
 

 
bottom
 
 

【2】inline-block + absolute + (fix)

 

 
top
 
 
 

 

 

 
left
 
 

 

 

 
right
 
 
 
 
 
 
 
 

 
bottom
 
 

思路三: table

　　水平方向子元素的间距可以用border实现。所有浏览器都不支持给table-cell元素设置overflow属性。firefox和IE11浏览器不支持给table-cell元素的设置100%高度的子元素设置overflow属性

 

 
top
 
 
 

 

 

 
left
 
 
 

 

 

 
right
 
 
 
 
 
 
 
 
 
 
 

 
bottom
 
 

思路四: absolute

    



    

        
 
            产品服务
            发展历程
            企业资讯
            企业文化
            关于我们
            加入我们
            联系我们
            网站导航
            网站律师
        
        

            

                 
                     
             
             

                 
                     
             
             

                 
                     
             
             

                 
                     
             
             

                 
                     
中国扫黄打非网
                 
             
        
        
 
            
            
Copyright © 2019-2025 51dongshi.net 版权所有
            

                赣ICP备2023002352号-34
            
            
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
            
        
    




Top