calc做个简单的布局

html  

    

        我是头部

    

    

        

          我是中间部分

        

    

 


css


*{

    margin: 0;

    padding: 0;

}

body,html{

    width: 100%;

    height: 100%;

}

#login{

    height: 100%;

    width: 100%;

    background: red;

}

#login .header{

    height: 70px;

    background: green;

}

#login section{

    width: 100%;

    background: blue;

    height: calc(100% - 70px);

}



效果


你可能感兴趣的:(calc做个简单的布局)