雙飛翼佈局的改造使用詳解

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的值

1. ##box-sizing：border- box時，div的寬度和高度為padding + border + width(內容高度)

2. 二、border-box屬性的應用

      雙飛翼佈局的改造，傳統的雙飛高度是自適應的。本次透過box-sizing屬性的border-box值對雙飛翼佈局的高度進行定高，從而實現head與footer固定，而中間內容部分自動出現滾動條的能力。

3. 程式碼如下：
   

   <meta><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: &#39;&#39;;  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><div>head</div><div><div>
   <div><div>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>left</div>
   <div>right</div>
   </div></div><div>footer</div>

#效果圖：
2. #重點程式碼解析

##實現傳統的雙飛翼佈局，此處不在贅述。

1. 根據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中文網其他相關文章！