双飞翼布局的改造使用详解-html教程-PHP中文网

双飞翼布局的改造使用详解

零下一度

发布： 2017-06-24 13:24:44

原创

1581 人浏览过

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时，div的宽度和高度为width和height的值
box-sizing：border-box时，div的宽度和高度为 padding + border + width(内容高度)

二、border-box属性的应用

对双飞翼布局的改造，传统的双飞高度是自适应的。本次通过box-sizing属性的border-box值对双飞翼布局的高度进行定高，从而实现head与footer固定，而中间内容部分自动出现滚动条的能力。

代码如下：

<html><head><meta charset="UTF-8"><title>Document</title><style>div, body{margin: 0px;}  .head{  height: 60px;  background: red;  }  .main {  height: 100%;  clear: both;  box-sizing: border-box;  padding: 60px 0px 100px 0px;  margin: -60px 0px -100px 0px;  }  .main-main{  clear: both;  }  .main-main:after{  content: '';  display: block;  overflow: hidden;  clear: both;  }  .cont-main{  margin: 0px 300px 0px 200px;  overflow: hidden;  overflow-y: auto;  height: inherit;  }  .main .cont, .main .left, .main .right{  float: left;  height: 100%;  }  .main .cont{  width: 100%;  }  .main .left{width: 200px;margin-left: -100%;  }  .main .right{width: 300px;margin-left: -300px;  }  .footer{  height: 100px;  background: gray;  }</style></head><body><div class="head">head</div><div class="main"><div class="main-main"><div class="cont"><div class="cont-main">cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont最后一条<br/></div></div><div class="left">left</div><div class="right">right</div></div></div><div class="footer">footer</div></body></html>

登录后复制

效果图：

重点代码解析

实现传统的双飞翼布局，此处不在赘述。
根据box-sizing属性的介绍，可以知道设置为border-box时，他的高度=padding + border的值，其中还需要利用margin的负值。

padding缩小内容本身的高度
margin负值拉近head、footer与内容的距离

.main {  height: 100%;  clear: both;  box-sizing: border-box;  padding: 60px 0px 100px 0px;  margin: -60px 0px -100px 0px;
  }

登录后复制

内容部分滚动条的实现由于我们的main(中间部分的最外层div，如.main)必须要设置height:100%，让其高度满屏。所以内容布局外层还需要增加一个div(如.main-main)。此时.main-main的高度就是我们想要的了。如下中间主体部分了css代码：

.cont-main{
  margin: 0px 300px 0px 200px;
  overflow: hidden;
  overflow-y: auto;
  height: inherit;
}

登录后复制

以上是双飞翼布局的改造使用详解的详细内容。更多信息请关注PHP中文网其他相关文章！

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

双飞翼布局的改造使用详解

一、box-sizing属性

二、border-box属性的应用

代码如下：

重点代码解析