作者:晴子suerw_980 | 来源:互联网 | 2018-03-01 10:22
box-sizing+margin负值升级双飞翼布局一、box-sizing属性.content-size,.border-size{width:200px;height:100px;padding:10px;border:5pxsolidred;margin:20px;}.content-size{bo
box-sizing + margin负值 升级双飞翼布局
一、box-sizing属性
.content-size, .border-size{width: 200px;height: 100px;padding: 10px;border: 5px solid red;margin: 20px;
}.content-size{box-sizing: content-box;
}.border-size{box-sizing: border-box;
}
context-size、border-size两个类的的width、height、padding、border、margin值都是一致。
box-sizing: content-box时,p的宽度和高度为width和height的值
box-sizing:border-box时,p的宽度和高度为 padding + border + width(内容高度)
二、border-box属性的应用
对双飞翼布局的改造,传统的双飞高度是自适应的。本次通过box-sizing属性的border-box值对双飞翼布局的高度进行定高,从而实现head与footer固定,而中间内容部分自动出现滚动条的能力。
代码如下:
head
cont
cont
cont
cont
cont
cont
cont
cont
cont
cont
cont
cont
cont
cont最后一条
left
right
效果图:
padding缩小内容本身的高度
margin负值拉近head、footer与内容的距离
.main { height: 100%; clear: both; box-sizing: border-box; padding: 60px 0px 100px 0px; margin: -60px 0px -100px 0px;
}
内容部分滚动条的实现 由于我们的main(中间部分的最外层p,如.main)必须要设置height:100%,让其高度满屏。所以内容布局外层还需要增加一个p(如.main-main)。此时.main-main的高度就是我们想要的了。如下中间主体部分了css代码:
.cont-main{
margin: 0px 300px 0px 200px;
overflow: hidden;
overflow-y: auto;
height: inherit;
}
以上就是双飞翼布局的改造使用详解的详细内容,更多请关注 第一PHP社区 其它相关文章!