The Application of box-sizing and margin negative values in the dual-flying wing layout transformation, box-sizingmargin
Box-sizing + margin negative value upgrades dual-flying wing Layout
I. box-sizing attributes.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;}2. border-box attribute Application
The traditional dual-flying height is adaptive to the transformation of the dual-flying wing layout. This time, the boder-box value of the box-sizing attribute is used to set the height of the dual-flying wing layout, so that the head and footer are fixed, while the middle content automatically displays the scroll bar.
The Code is as follows:<Html>:
Key code analysis.main { height: 100%; clear: both; box-sizing: border-box; padding: 60px 0px 100px 0px; margin: -60px 0px -100px 0px; }
- The implementation of the Content Part scroll bar is because we must set height: 100% for main (the outermost div of the middle part, such as. main) to make the height full screen. Therefore, a div (such as. main-main) needs to be added to the outer layer of the content layout ). In this case, the height of main-main is what we want. The css code is part of the following body:
.cont-main{ margin: 0px 300px 0px 200px; overflow: hidden; overflow-y: auto; height: inherit;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
