× 目录 [1]float [2]inline-block [3]table [4]absolute [5]flex [6]总结
全屏布局在实际工作中是很常用的，比如管理系统、监控平台等。本文将介绍关于全屏布局的5种思路
【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>top</p> </div> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </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>top</p> </div> <div class="middleWrap"> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
【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>top</p> </div> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </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>top</p> </div> <div class="middleWrap"> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="rightWrap"> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
水平方向子元素的间距可以用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>top</p> </div> <div class="middleWrap"> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="rightWrap"> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
<style>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;}</style>
<div class="parent" id="parent" style="background-color: lightgrey;"> <div class="top" style="background-color: lightblue;"> <p>top</p> </div> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
flex常用于小范围的布局，使用全屏布局时会因为性能问题，出现卡顿现象。如果要使用全屏自适应布局，则只有flex才能达到效果
<style>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;}</style>
<div class="parent" id="parent" style="background-color: lightgrey;"> <div class="top" style="background-color: lightblue;"> <p>top</p> </div> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
全屏布局实际上就是两列或三列自适应布局的扩展形式。由于实现的是全屏效果，高度实际上是固定的，所以思路并没有等高布局局限。水平方向元素之间的间距根据实际情况使用margin、padding、border都可以实现
jdk8 neue Funktionen
Der Computer kann nicht kopieren und einfügen
Methode zur Stornierung der Benutzerkontensteuerung
Einführung in das Dokument in JS
So löschen Sie Array-Elemente in JavaScript
Was tun, wenn Avast falsch positive Ergebnisse meldet?
So implementieren Sie die JSP-Paging-Funktion
Vorteile von Pycharm
