登录页面布局_神zhi殇的博客_登录页布局

+截图效果

<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>
<style>
    html,
    body {