calc做个简单的布局

html  

<div id='login'>

    <header>

        <div class="header">我是头部</div>

    </header>

    <section>

        <div class="container">

          我是中间部分

        </div>

    </section>

</div> 

---

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);

}

---

效果