欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-13 15:20:02
...

前面的话

  全屏布局在实际工作中是很常用的,比如管理系统、监控平台等。本文将介绍关于全屏布局的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;
    leftCSS全屏布局的5种方式 - 小火柴的蓝色理想

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频