双飞翼布局的改造 box-sizing和margin负值的应用

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;
}
复制代码
  1. context-size、border-size两个类的的width、height、padding、border、margin值都是一致。
  2. box-sizing: content-box时，div的宽度和高度为width和height的值
  3. 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>
复制代码

效果图：

重点代码解析

  1. 实现传统的双飞翼布局，此处不在赘述。
  2. 根据box-sizing属性的介绍，可以知道设置为border-box时，他的高度=padding + border的值，其中还需要利用margin的负值。
    1. padding缩小内容本身的高度
    2. margin负值拉近head、footer与内容的距离
复制代码
.main {
      height: 100%;
      clear: both;
      box-sizing: border-box;
      padding: 60px 0px 100px 0px;
      margin: -60px 0px -100px 0px;
  }
复制代码
  1. 内容部分滚动条的实现 由于我们的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;
}
posted @   小龙女先生  阅读(564)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae