圣杯布局

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main {
    margin-left: 200px;
    margin-right: 100px;
}
main> div {
    float: left;
}
#center {
    width: 100%;
    background-color: pink;
}
#left {
    position: relative;
    width: 200px;
    right: 200px;
    margin-left: -100%;
}
#right {
    width: 100px;
    margin-right: -100px;
}
<main>
    <div id="center">1</div>
    <div id="left">2</div>
    <div id="right">3</div>
</main>

index页面布局

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
    height: 20px;
    background: red;
}
html {
    height: 100%;
}
body {
    height: 100%;
}
main {
    height: calc(100% - 40px);
    background-position: center;
    background-size: cover;
    background-image: url("https://oncesure.gitee.io/sure/img/4.jpg");
    background-repeat: no-repeat;
}
footer {
    height: 20px;
    background: black;
}
<header></header>
<main></main>
<footer></footer>

main页面布局

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    height: 100%;
}
header {
    height: 20px;
    background: red;
}
main {
    min-height: calc(100% - 40px);
    overflow: hidden;
}
nav,section {
    margin-bottom: -100000px;
    padding-bottom: 100000px;
}
nav {
    width: 300px;
    float: left;
}
section {
    margin-left: 300px;
    background: green;
}
footer {
    height: 20px;
    background: black;
}
<header></header>
<main>
    <nav>
        1
    </nav>
    <section>
        2
    </section>
</main>
<footer></footer>