搜尋

首頁  >  文章  >  web前端  >  雙飛翼佈局的改造使用詳解

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

零下一度
零下一度原創
2017-06-24 13:24:441652瀏覽

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屬性的應用

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

  3. 程式碼如下：

    <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>
      4. #效果圖：

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

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：HTML中如何使用CSS？下一篇：HTML中如何使用CSS？

相關文章

看更多