我将HTML，Body和主要html标记设置为position: fixed;，主标记也设置为overflow: scroll;。这给了我想要的效果，而不必使用javascript，具有可滚动的主div。
现在我已经输入了页脚标签并设置了高度和宽度，但它与Main Div重叠。我已经尝试了每个可能的位置属性，以使其正确显示并粘贴在页面底部当滚动最后一个div时，主要内容和向上滚动。但无济于事，我尝试了很多东西，改变了位置，宽度和高度，我搜索了类似的问题并查看了SO，但我找不到任何东西，它可能是我的搜索条件，但我仍然无法想象它出来了。
最终我希望它在完成滚动后显示在Main div的底部。
我不想将footer标记放在main标记内，因为HTML5在语义上会不正确，尽管是的，它会起作用。
html, body {
position: fixed;
width: 100%;
height: 100%;
}
body{
width: 100%;
font-family: 'Oswald', sans-serif;
background-image: url(../images/backgrounds/wallpaper.png);
background-repeat: no-repeat;
background-position: bottom center;
}
/* The CSS in this Section is for the Page Header */
header{
width: 100%;
height: 300px;
margin: 0px;
background-color: #828485;
}
.imgwrap {
float: left;
width: 49%;
height: 150px;
padding-left: 20px;
}
.gradient {
top: 100px;
background-image: linear-gradient(#828485 0%, #fff 100%);
width: 100%;
height: 150px;
overflow: hidden;
border-top: 1px solid grey;
}
/* End of Page Header */
/* Main Content */
main {
position: fixed;
width: 100%;
height: 66%;
display: block;
overflow: scroll;
}
main::-webkit-scrollbar {
display: none;
}
#over {
margin: 0 auto;
height: 800px;
color: #fff;
}
.split {
background-color: rgba(147,151,153,0.6);
color: rgb(237,36,62);
height: 350px;
}
#activity {
height: 800px;
}
#servers {
margin: 0 auto;
height: 800px;
}
/* End of Main */
/* Start of footer */
footer {
position: fixed;
bottom: 0;
height: 150px;
width: 100%;
background-color: #828485;
}
Some Header
"A second Header"
Another Header
"Yet another header"
How many headers
This is too many headers now
Last one I promise
Contact an Admin.