flex_layout

layout use flex

by ewangsf

HTML

<div class="container">
            <div class="header">
                <h1>header</h1>
            </div>
            <div class="main">
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
                <h1>main</h1>
            </div>
            <div class="footer">
                <h1>footer</h1>
                <h1>footer</h1>
            </div>
    </div>

CSS

html,
body {
    height: 100%;
    overflow: hidden;
}

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.header {
    width: 100%;
    height: 100px;
    background: red;
    flex: 0 0 100px;
}
.main {
    flex: 1 1 100%;
    overflow-y: scroll;
}
.footer {
    width: 100%;
    flex: 1 0 100px;
    background: green;
}