您好,登錄后才能下訂單哦!
【1】float + calc
通過calc()函數(shù)計(jì)算出.middle元素的高度,并設(shè)置子元素高度為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" > <div class="top" > <p>top</p> </div> <div class="middle" > <div class="left" > <p>left</p> </div> <div class="right" > <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" > <p>bottom</p> </div> </div>
【2】float + absolute + (fix)
通過增加結(jié)構(gòu)來提高兼容性,.middle元素設(shè)置100%的高度,.top和.bottom設(shè)置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" > <div class="top" > <p>top</p> </div> <div class="middleWrap"> <div class="middle" > <div class="left" > <p>left</p> </div> <div class="right" > <div class="right-in"> <p>right</p> </div> </div> </div> </div> <div class="bottom" > <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" > <div class="top" > <p>top</p> </div> <div class="middle" > <div class="left" > <p>left</p> </div> <div class="right" > <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" > <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" > <div class="top" > <p>top</p> </div> <div class="middleWrap"> <div class="middle" > <div class="left" > <p>left</p> </div> <div class="rightWrap"> <div class="right" > <div class="right-in"> <p>right</p> </div> </div> </div> </div> </div> <div class="bottom" > <p>bottom</p> </div> </div>
水平方向子元素的間距可以用border實(shí)現(xiàn)。所有瀏覽器都不支持給table-cell元素設(shè)置overflow屬性。firefox和IE11瀏覽器不支持給table-cell元素的設(shè)置100%高度的子元素設(shè)置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" > <div class="top" > <p>top</p> </div> <div class="middleWrap"> <div class="middle" > <div class="left" > <p>left</p> </div> <div class="rightWrap"> <div class="right" > <div class="right-in"> <p>right</p> </div> </div> </div> </div> </div> <div class="bottom" > <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" > <div class="top" > <p>top</p> </div> <div class="middle" > <div class="left" > <p>left</p> </div> <div class="right" > <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" > <p>bottom</p> </div> </div>
flex常用于小范圍的布局,使用全屏布局時(shí)會(huì)因?yàn)樾阅軉栴},出現(xiàn)卡頓現(xiàn)象。如果要使用全屏自適應(yīng)布局,則只有flex才能達(dá)到效果
<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" > <div class="top" > <p>top</p> </div> <div class="middle" > <div class="left" > <p>left</p> </div> <div class="right" > <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" > <p>bottom</p> </div> </div>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。