Detailed explanation of the transformation and use of the double flying wing layout-HTML Tutorial-php.cn

Detailed explanation of the transformation and use of the double flying wing layout

零下一度

Release： 2017-06-24 13:24:44

Original

1580 people have browsed it

box-sizing + negative margin upgrade double flying wing layout

1. box-sizing attribute

.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;
}

Copy after login

The width, height, padding, border, and margin values of the two classes of context-size and border-size are the same.
box-sizing: content-box, the width and height of the div are the values of width and height
box-sizing: border- box, the width and height of the div are padding + border + width (content height)

2. Application of the border-box attribute

Transformation of the double-wing layout , the traditional double flight height is adaptive. This time, the height of the double-wing layout is fixed through the border-box value of the box-sizing attribute, so that the head and footer are fixed, and the scroll bar automatically appears in the middle content part.

The code is as follows:

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

Copy after login

Rendering:

Key code analysis

To achieve the traditional double-flying wing layout, I will not go into details here.
According to the introduction of the box-sizing attribute, you can know that when set to border-box, its height = padding + border value, and the negative value of margin needs to be used.

padding reduces the height of the content itself
margin negative The value brings the distance between the head, footer and content closer The outermost div of the part, such as .main) must be set to height:100% so that its height fills the screen. Therefore, a div (such as .main-main) needs to be added to the outer layer of the content layout. At this time, the height of .main-main is what we want. The following middle body part contains the css code:

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

Copy after login

The above is the detailed content of Detailed explanation of the transformation and use of the double flying wing layout. For more information, please follow other related articles on the PHP Chinese website!