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">
    内容区
</main>

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

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

* {
    box-sizing: border-box;
}

.header {
    height: 48px;
}

.content {
    min-height: 640px;
}

.footer {
    height: 64px;
}