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

×

目录

[1]float [2]inline-block [3]table[4]absolute[5]flex[6]总结

前面的话

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

思路一: float

【1】float + calc

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

style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.middle{
    overflow: hidden;
    height: calc(100% - 100px);
}
.left{
    float: left;
    width: 100px;
    margin-right: 20px;
    height: 100%;
}
.right{
    overflow: auto;
    height: 100%;
}
.right-in{
    height: 1000px;
}
.top,.bottom{height:50px;}
style>

div class="parent" id="parent" style="background-color: lightgrey;">
    div class="top" style="background-color: lightblue;">
        p>topp>
    div>  
    div class="middle" style="background-color: pink;">
        div class="left" style="background-color: orange;">
            p>leftp>
        div>
        div class="right" style="background-color: lightsalmon;">
            div class="right-in">
                p>rightp>
            div>
        div>
    div>          
    div class="bottom" style="background-color: lightgreen;">
        p>bottomp>
    div>        
div>

【2】float + absolute + (fix)

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

style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.top,.bottom{
    position: absolute;
    height:50px;
    left: 0;
    right: 0;
}
.top{top: 0;}
.bottom{bottom: 0;}
.middleWrap{
    height: 100%;
    overflow: hidden;
}
.middle{
    overflow: hidden;
    height: 100%;
    margin: 50px 0;
}
.left{
    float: left;
    width: 100px;
    margin-right: 20px;
    height: 100%;
}
.right{
    overflow: auto;
    height: 100%;
}
.right-in{
    height: 1000px;
}
style>

div class="parent" id="parent" style="background-color: lightgrey;">
    div class="top" style="background-color: lightblue;">
        p>topp>
    div>  
    div class="middleWrap">
        div class="middle" style="background-color: pink;">
            div class="left" style="background-color: orange;">
                p>leftp>
            div>
            div class="right" style="background-color: lightsalmon;">
                div class="right-in">
                    p>rightp>
                div>
            div>
        div>        
    div> 
    div class="bottom" style="background-color: lightgreen;">
        p>bottomp>
    div>        
div>

思路二: inline-block

【1】inline-block + calc

style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.middle{
    height: calc(100% - 100px);
    font-size: 0;
}
.left,.right{
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}
.left{
    width: 100px;
    margin-right: 20px;
    height: 100%;
}
.right{
    width: calc(100% - 120px);
    height: 100%;
    overflow: auto;
}
.right-in{
    height: 1000px;
}
.top,.bottom{height: 50px;}
style>

div class="parent" id="parent" style="background-color: lightgrey;">
    div class="top" style="background-color: lightblue;">
        p>topp>
    div>  
    div class="middle" style="background-color: pink;">
        div class="left" style="background-color: orange;">
            p>leftp>
        div>
        div class="right" style="background-color: lightsalmon;">
            div class="right-in">
                p>rightp>
            div>
        div>
    div>        
    div class="bottom" style="background-color: lightgreen;">
        p>bottomp>
    div>        
div>

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

style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.top,.bottom{
    position: absolute;
    left: 0;
    right: 0;
    height: 50px;
}
.top{top: 0;}
.bottom{bottom: 0;}
.middleWrap{
    height: 100%;
    font-size: 0;
    overflow: hidden;
}
.middle{
    position: relative;
    height: 100%;
    margin: 50px 0;
    overflow: hidden;
}
.left,.rightWrap{
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}
.left{
    position: absolute;
    width: 100px;
    margin-right: 20px;
    height: 100%;
}
.rightWrap{
    width: 100%;
    height: 100%;
}
.right{
    height: 100%;
    margin-left: 120px;
    overflow: auto;
}
.right-in{
    height: 1000px;
}
style>

div class="parent" id="parent" style="background-color: lightgrey;">
    div class="top" style="background-color: lightblue;">
        p>topp>
    div>  
    div class="middleWrap">
        div class="middle" style="background-color: pink;">
            div class="left" style="background-color: orange;">
                p>leftp>
            div>
            div class="rightWrap">
                div class="right" style="background-color: lightsalmon;">
                    div class="right-in">
                        p>rightp>
                    div>
                div>                
            div>
        div>         
    div>
    div class="bottom" style="background-color: lightgreen;">
        p>bottomp>
    div>        
div>

思路三: table

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

style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.top,.bottom{
    position: absolute;
    width: 100%;
    height: 50px;
}
.bottom{bottom: 0;}
.middleWrap{
    height: 100%;
    overflow: hidden;
}
.middle{
    width: 100%;
    height: 100%;
    display: table;    
    margin: 50px 0;
    table-layout: fixed;
}
.left{
    display: table-cell;
    width: 120px;
    border-right: 20px solid lightgray;
}
.rightWrap{
    display: table-cell;
    height: 100%;
}
.right{
    height: 100%;
    overflow: auto;
}
.right-in{
    height: 1000px;
}
style>

div class="parent" id="parent" style="background-color: lightgrey;">
    div class="top" style="background-color: lightblue;">
        p>topp>
    div> 
    div class="middleWrap">
        div class="middle" style="background-color: pink;">
            div class="left" style="background-color: orange;">
                p>leftp>
            div>     
            div class="rightWrap">
                div class="right" style="background-color: lightsalmon;">
                    div class="right-in">
                        p>rightp>
                    div>            
                div>                    
            div>   
        div>         
    div>    
    div class="bottom" style="background-color: lightgreen;">
        p>bottomp>
    div>        
div>

思路四: absolute

style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.top,.middle,.bottom{
    position: absolute;
    left
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html5中元素能拉伸宽度吗
• html中怎么清除li黑点
• CSS全屏布局的5种方式 - 小火柴的蓝色理想

• 接口与抽象类01
• 类的composer自动加载机制
• composer原理与常用命令03
• composer原理与常用命令02