Absolute positioning to achieve mobile layout

Read again today again Zhang article, reading can use absolute position to realize move end Fiex effect of layout, so after the study finished hands-on practice.
First figure.

Effect Description: The ends and ends are fixed, the side bar is fixed, the middle content block is adaptive, free sliding.

HTML structure

<div class= "Top" ></div>
<div class= "content" ></div>
<div class= "side" ></ div>
<div class= "Bottom" ></div>

CSS Styles

<style type= "Text/css" >
    html,body{
        width:100%;
        height:100%;
        margin:0;
        padding:0;
        font-size:100px       
    }
    . top{
        Position:absolute;
        Height:1rem;
        top:0;
        left:0;
        right:0;
        Background-color: #000;
    content{
        Position:absolute;
        Top:1rem;
        Bottom:. 8rem;
        Left:1.5rem;
        right:0;
        Background-color: #fff;
        Overflow:auto
    }
    . side{
        Position:absolute;
        Width:1.5rem;
        left:0;
        Top:1rem;
        Bottom:. 8rem;
        Background-color: #333;
    bottom{
        Position:absolute;
        Height:. 8rem;
        bottom:0;
        left:0;
        right:0;
        Background-color: #666;
    }
</style>

To realize the free sliding of the middle content area is: Overflow:auto effect.
Sidebar Of course also can be removed to achieve the overall layout of the site.

In fact, I am not simply stuffed with some text and pictures, these are actually a small example.

1. Image and text of the fluid layout (figure I)

<div class= "Auto" >
     The Tennis Café in Chengdu, Dimitrov 1.91-meter, Kevin Anderson height 2.03-meter, super Nova Keyegos 1.93-meter , the shortest in the room is Tim, 1.85-meter tall, they are the real "tennis giants." At the moment, the height of a tennis player can challenge a basketball star, so what is the concept of their height advantage? Tennis pays special attention to serve, while height is vital to serve, tall
</div>

. auto{
    margin-left:. 8rem;//give the picture an empty position
}
. Auto img{
    width:. 64rem;
    Height:. 64rem;
    Float:left;
    Margin-left: Position adjustment after -0.8rem;//picture float

Or is this layout

<div class= "Auto" >
    the Tennis Café in Chengdu, Dimitrov 1.91-meter, Kevin Anderson height 2.03-meter, Super Nova Keyegos 1.93-meter, the shortest here is Tim, height of 1.85-meter, they are the real "tennis giants." At the moment, the height of a tennis player can challenge a basketball star, so what is the concept of their height advantage? Tennis pays special attention to serve, while height is vital to serve, tall
</div>

img{
    Float:left;
    Width:. 64rem;
    Height:. 64rem;
} 
. auto{
    margin-left:. 8rem;
}

Implementation is very simple, do not say more, look at the next one.

2. Using padding to form a standard square (adaptive) (Fig. II)

<div class= "Square" ></div>

. square{
    padding:50%;
    Background-color:rgba (0,0,0,.1);
}

3. Use positioning to form horizontal vertical center (figure II)

<li class= "IMGC" >
    
</li>

. imgc{
    position:relative;
center{
    Position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;//after positioning, be sure to set the margin property, or not center. The principle is margin fill blanks.
}

4. The use of padding to achieve a two-column high layout (figure II)

<li class= "box" >
    <!--high layout-->
    <div class= "Orange" > Zhouhuang the Tennis Café in Chengdu, Dimitrov 1.91-meter, Kevin Anderson </ div>
    <div class= "green" > Right green this time to Chengdu's Tennis café, Dimitrov 1.91-meter, Kevin Anderson </div>
</li>

. box{
    Overflow:hidden;
    resize:vertical;//resize, in fact I did not find any effect
}
. orange{
    float:left;
    Background-color:orange
}
. green{
    Float:left;
    Background-color:green
}
. orange,.green{
    width:50%;
    Margin-bottom: -10rem;
    padding-bottom:10rem;//is mainly the element to give a relatively large padding value and a larger margin negative, equivalent to offset, analog and other high, specific other high methods can refer to [http://www.cnblogs.com/ Xiaohuochai/archive/2016/05/04/5457127.html]
}

5. The use of row height and alignment, to achieve an indefinite size of the picture and the number of indeterminate lines of text vertically centered

<li class= "Box2" >
    <!--pictures are vertically centered using line-high text processing, converted to inline-block--> 
</li>

. box2{
    Text-align:center;
    Line-height:3rem
}
. box2>img{
    vertical-align:middle;
}

Because the IMG default is inline-block display, so do not convert, if it is div or span and so on, all need to transform, so that the container can put text.
If you need to be compatible with ie8-, you need to adjust, add the I tag behind an img or other tag, and set

i{
    Display:inline-block;
    height:100%;
    Vertical-align:middle;
}

Well, this is my learning practice this morning, to share with you, keep learing.