Question

div+css的四行自适应手机端屏幕布局怎么写？高度、宽度为自适应100%，即为满屏显示

最上面、最下面一行固定宽度为50px。中间两行的高度平分高度自适应
求高手给思路

Answer 1

*{
    margin:0;
    padding:0;    
}
html,body{
    height:100%;    
}
.line1,.line4{
    position:absolute;
    width:100%;
    height:50px;
    z-index:5;    
}
.line1{
    top:0;    
}
.line2{
    position:relative;
    height:50%;
    z-index:1;    
}
.line3{
    position:relative;
    height:50%;
    z-index:1;    
}
.line4{
    bottom:0;    
}

我想你要表达是是高50吧？不太会表述，还是直接给你上代码吧

追问

line3 line4都没问题。但是line1好像压住line2的上面了，也就是line2也在最顶上，并没有浮动在line1的下面

追答

.line2{
    position:relative;
    height:50%;
    padding-top:50px;
    z-index:1;    
}
.line3{
    position:relative;
    height:50%;
    padding-bottom:50px;
    z-index:1;    
}

line2和line3这么改写一下就行了