登录页面布局

+截图效果

<style>
    html,
    body {
        width: 100%;
        height: 100%;
    }

    .login-container {
        height: 100%;
        overflow-y: auto;
    }

    .login {

        min-height: 200px;
        height: 100%;
        position: relative;

    }

    .header {
        height: 40px;
        background: #9cf6af;
        position: relative;
        top: 0px;
        left: 0;
        width: 100%;
    }

    .content {
        background: #f6d17b;
        height: calc(100% - 40px);
        overflow: hidden;/*要不然content内容太多，footer就没在底部，效果失效了！*/
        /*.login一定要给一个适合的最小高度*/
    }

    .footer {
        width: 100%;
        height: 40px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #ae6df6;
    }
</style>
<div class="login-container">
    <div class="login">
        <div class="header">header</div>
        <div class="content">
            start我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分end
        </div>
        <div class="footer">footer</div>
    </div>
</div>

注： 1. content给一个overflow:hidden;要不然content内容太多，footer就没在底部，效果失效了！
2. .login一定要给一个适合的最小高度，要不然超出了。
3. 感觉还是很多问题，并没有完美解决，用flex试一下

flex布局：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,
    body {
        width: 100%;
        height: 100%;
    }
    .login-container{
        height: 100%;
    }
    .login{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .header{
        height: 40px;
        background: #cbffa2;
        flex-shrink:0;
    }
    .content{
        flex: 1;
        background: #ffc6b9;
    }
    .footer{
        height: 40px;

        background: #a7a8ff;
        flex-shrink:0;
    }
</style>
<div class="login-container">
    <div class="login">
        <div class="header">header</div>
        <div class="content">
            start我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分end
        </div>
        <div class="footer">footer</div>
    </div>
</div>

注：1.使用了flex-shrink:0;属性，这样在content内容很多的时候，header和footer不会缩小！！！h保持40px不变
2. 无论怎么样变化，都是挺好的效果！