CSS全屏布局的5种方式
2017-05-10 11:31
411 查看
思路一: 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>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>
思路二: 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>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>
思路三: 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>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>
思路四: absolute
<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常用于小范围的布局,使用全屏布局时会因为性能问题,出现卡顿现象。如果要使用全屏自适应布局,则只有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>
相关文章推荐
- CSS全屏布局的5种方式
- CSS全屏布局的6种方式
- 实现CSS等分布局的5种方式
- 实现CSS等分布局的5种方式
- CSS全屏布局的6种方式
- 你可能不知道的5种 CSS 和 JS 的交互方式
- html+css----css布局方式
- html+css布局的三种方式(自然布局/流动布局/定位布局)
- CSS的新表格布局方式
- CSS垂直居中网页布局实现的5种方法
- css3种布局方式:默认文档流、浮动布局、定位布局-----看张鹏老师视频笔记
- 你可能不知道的5种 CSS 和 JS 的交互方式
- CSS用四种方式实现布局
- css中布局方式总结
- css常用布局方式和技巧
- 你可能不知道的5种 CSS 和 JS 的交互方式
- 你可能不知道的5种 CSS 和 JS 的交互方式
- CSS两列全屏可伸缩布局
- css两栏全屏布局学习
- 【CSS】瀑布流布局的两种方式:传统多列浮动和绝对定位布局