Five ways of full-screen layout of CSS
Idea 1: float
[1] float + calc
Calculate the height of the .middle element through the calc () function, and set the height of the child element to 100%.
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;}
Top
Left
Right
Bottom
[2] float + absolute + (fix)
Improve compatibility by adding structure, .middle element sets 100% height, .top and .bottom set absolute to override .middle
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;} .flexileWrap {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;}
Top
Left
Right
Bottom
Idea 2: inline-block
[1] inline-block + calc
Body,p {margin: 0;} body,html,.parent {height: 100%;} .middle {height: calc (100%-100px); font-size: 0;} .left: 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;}
Top
Left
Right
Bottom
[2] inline-block + absolute + (fix)
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;} .SecretleWrap {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;}
Top
Left
Right
Bottom
Idea 3: table
The spacing of child elements in the horizontal direction can be achieved in border. All browsers do not support setting the overflow attribute on the table-cell element. Firefox and IE11 browsers do not support setting the overflow attribute for child elements of the table-cell element that set 100% height
Body,p {margin: 0;} body,html,.parent {height: 100%;} .top, .bottom {position: absolute; width: 100%; height: 50px;} .bottom {bottom: 0;} .SecretleWrap {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;}
Top
Left
Right
Bottom
Idea 4: absolute
Body,p {margin: 0;} body,html,.parent {height: 100%;} .top, .middle, .bottom {position: absolute; left: 0; right: 0;} .top {top: 0; height: 50px;} .bottom {bottom: 0; height: 50px;} .middle {top: 50px; bottom: 50px;} .left. Right {position: absolute; top: 0; bottom: 0;} left {width:100px } .right {left: 120px; right: 0; overflow: auto;} .right-in {height: 1000px;}
Top
Left
Right
Bottom
Idea 5: flex
Flex is often used for small-scale layouts. When using full-screen layouts, stutters may occur due to performance problems. If you want to use a full-screen adaptive layout, only flex can achieve the effect.
Body,p {margin: 0;} body,html,.parent {height: 100%;} .parent {display: flex; flex-direction: column;} .top, .bottom {height: 50px;} .middle {display: flex; flex: 1;} .left {width: 100px; margin-right: 20px;} .right {flex: 1; overflow: auto;}. Right-in {height: 1000px;}
Top
Left
Right
Bottom
