When you’re writing a mobile project, the general layout is that you want the top or bottom of the content to be fixed and not move, but the middle content to slide, so what do you do?

We can divide it into two parts to analyze and solve the problem.

  1. Fixed content section
  2. The rest of the scrolling content section

Fixed area section

1. Absolute positioning setting

  1. Html, body{height: 100%}, and overflow: hidde = overflow: hidde

  2. Fixed areas using absolute counterpoint (why not fixed positioning? Position :fixed is not supported for ios4 and android2.2.

2. Elastic box setting

Html, body{height: 100%}, but to prevent page scrolling, prevent content from exceeding the height of the body, you can set overflow: hidden for the body

2, set the elastic box for the outermost content, the main axis is y axis

3. Fill up the remaining space for the slippable content in the middle

Rest of the scroll area section

The rest of the scroll area can be handled with overflow

Overflow-y :auto and -webkit-overflow-scrolling: touch overflow-y:autoCopy the code

You can use overflow-y: auto; The overflow-y property specifies whether to crop the content and render a scrollbar, or to display the overflow content when a block-level element overflows at its top or bottom. To put it simply, overflow-y is a property that allows content to overflow in the vertical direction in the form of scroll bars.

-webkit-overflow-scrolling: touch

-webkit-overflow-scrolling: touch allows ios to create a UIScrollView for it, using hardware to speed up rendering.

Overflow-y:auto works on Windows phone8 and android4+. Ios5 + supports overflow-scrolling.

So elastic rolling is compatible

   .css{
       overflow:auto;/* WinPhone8 and Android4 + */
       -webkit-overflow-scrolling: touch; /* ios5+ */
       }
Copy the code

Layout 1: Full version of absolute positioning Settings

Define the overall height of the page to be 100%, then use position:absolute layout to resolve the middle scroll with: overflow-y:auto; -webkit-overflow-scrolling: touch

code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> *{padding:0; margin:0; } html,body{height:100%; } .wrap{width:100%; } .header,.footer{height:40px; line-height:40px; background-color:#D8D8D8; text-align:center; } .header{position: absolute; top:0; left:0; width:100%; } .footer{position: absolute; bottom:0; left:0; width:100%; } .main{position:absolute; z-index:1; top:40px; left:0; bottom:40px; width:100%; } .main{ Overflow-y:auto; /* webkit-overflow-scrolling: scrolling; /* ios5+ */ } .wrap > p{padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; font-size: 14px; } </style> <body> <div class="wrap"> <div class="header"> Header area </div> <div class="main"> <div> <p> iscroll Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Height auto-adapts </p> < P > IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, height auto-adapts </p> <p> IScroll rolling area, Highly automatic adaptation < / p > < / div > < / div > < div class = "footer" > footer area < / div > < / div > < / body > < / HTML >Copy the code

Layout 2: Full version of the elastic box setup

For better compatibility, we need to mix the new elastic box with the old elastic box. (The new elastic box flex2012 syntax will be the standard syntax in the future, most browsers have implemented the prefix-free version. The old version of Box-flex is a 2009 syntax, so it needs to be prefixed. Define the page height to be 100%, and set the properties needed for the outermost container to be elastic

Flex: Define layout as box model properties
The box model is laid out vertically
Box-flex :1 child takes up the remaining space
Flex-align-center: Child element is vertically centered
Flex-pack-center: Horizontally centered child element
Flex-pack-justify: justify child elements
Compatibility: ios 4+, android 2.3+, winphone8+

Overflow-y :auto; -webkit-overflow-scrolling: touch

code

<! DOCTYPE HTML > < HTML > <head lang="en"> <meta charset="UTF-8"> <title> Flex upper and lower fixed middle scroll layout </title> <meta The content = "width = device - width, initial - scale = 1.0, maximum - scale = 1.0, user-scalable=0" name="viewport"> <style type="text/css"> *{padding: 0; margin: 0; } html,body{height: 100%} .wrap{width: 100%; height: 100%; } .header,.footer{height:40px; line-height:40px; background-color:#D8D8D8; } .main{overflow:auto; -webkit-overflow-scrolling: touch; }. Flex {/* all set elastic layout */ display:-webkit-box; /* Compatible with Google Chrome 4+, Safari 3.1, iOS Safari 3.2+ * /* Compatible with Google Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display:-ms-flexbox; /* IE 10 */ display:flex; /* Compatible with Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */}. Flex -v{/* Set the box model vertical layout, */ -webkit-box-orient:vertical; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; }. Flex-1 {/* set the child element to occupy the remaining space, set the prefix compatibility as above */ -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1; }. Flex-align-center {/* set child element vertical center, set prefix compatibility as above */ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; }. Flex-pack-center {/* set the child element horizontally centered, set the prefix compatibility as above */ -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center; }. Flex-pack-justify {/* webkit-box-pack:justify; -webkit-justify-content: space-between; -ms-flex-pack:justify; justify-content:space-between; } </style> </head> <body> <div class="wrap flex flex-v"> <div class="header"> I want it to fix the top </div> <div class="main flex-1"> Highly automatically ADAPTS to < / p > < p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > Highly automatically ADAPTS to < / p > < p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > Highly automatically ADAPTS to < / p > < p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > Highly automatically ADAPTS to < / p > < p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < p > height automatically ADAPTS to < / p > < / div > < div class = "footer" > I want it at the bottom of the fixed < / div > < / div > </body> </html>Copy the code

Scroll bar optimization section

If you set overflow-y:scroll to always be ugly on ios, you can set the following property to this element:

margin-right: -20px;
padding-right: 20px;
Copy the code

Do a little hack on the scrollbar and it will never appear again, and user interaction will have the same feel and better experience as native scrolling. Set webKit browser private properties ::- Webkit-scrollBar allows more flexible control of the scrollbar, thanks. If you only need to hide it, the following code can be used:

::-webkit-scrollbar{
display: none
}

Copy the code

Although the majority of webKit cores are available on mobile browsers, it’s important to wait until you’ve tested it on the real machine. If some browsers don’t support this property, you can still use the hack above.