当前位置：Gxlcms > html代码 > CSS全屏布局的5种方式-小火柴的蓝色理想

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

时间：2021-07-01 10:21:17 帮助过：21人阅读

前面的话

　　全屏布局在实际工作中是很常用的，比如管理系统、监控平台等。本文将介绍关于全屏布局的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

                  

	 	
                    
                        
                            
                                < 上一篇
相对路径与绝对路径-jackln
                            
                            
                                 下一篇 >
web前端入门：一小时学会写页面-空酷狗