SOURCE

/**
 * 布局盒子随机上色
 */
function RandomBorderColor() {
    let boxes = document.getElementsByClassName('box');

    for (let box of boxes) {
        let r = Math.round(Math.random() * 256);
        let g = Math.round(Math.random() * 256);
        let b = Math.round(Math.random() * 256);
        box.style.borderStyle = "solid";
        box.style.borderSize = "1px";
        box.style.borderColor = "rgb(" + r + "," + g + "," + b + ")";
    }

}

RandomBorderColor()

<header class="box header">
    头部
</header>

<main class="box content">
    <div class="longcontent">超长内容</div>
</main>

<footer class="box footer">
    底部
</footer>

html,
body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100%;
    overflow: scroll;
}

.header {
    position: absolute;
    top: 0;
    height: 48px;
    width: 100%;
}

.content {
    position: absolute;
    margin-top: 48px;
    margin-bottom: 48px;
    width: 100%;
    height: calc(100% - 48px - 48px);
    overflow-y: scroll;
}

.longcontent {
    height: 1024px;
    color: white;
    background: blue;
}

.footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 48px;
}