Css 页面中间无粘性页脚，中断上一个div

我是新的网站设计，所以请温柔。我正试图设计一个相当简单的页面，其中每个元素都遵循前面的规则——没有浮动，没有绝对定位，也没有粘性的页脚。本质上，我只希望页脚出现在页面的末尾（而不是屏幕底部），此时它出现在另一个元素的中间。尽管进行了广泛的搜索和阅读，我还是无法找出我做错了什么

以下是我的CSS：

header, footer, nav, div.main {  
    display: block;
  }

header {
  width: 940px;
  height: 150px;
  margin: 0 auto;
  margin-top: -56px;
  border: 0;
  padding: 0;
  }

nav {
  margin: 0 auto;
  width:940px;
  height:40px;
  background:#0F6B8F;
  overflow:hidden;
  }

nav ul {
  clear:left;
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  text-align:center;
  }

nav ul li {
  display:block;
  float:left;
  list-style:none;
  margin:0;
  margin-top: -5px;
  padding:0;
  position:relative;
  color:#C2D6DD;
  font-family: sans-serif;
  font-size: 1.8em;
  }

nav ul li a {
  display:block;
  margin:0 0 0 1px;
  padding-left: 10px;
  padding-right: 10px;
  background:#0F6B8F;
  color:#C2D6DD;
  text-decoration:none;
  line-height:1.8em;
  }

nav ul li a:hover {
  background:#0F6B8F;
  color:#ED7312;
  }

a.navlink {
  color: #C2D6DD;
  }

a:link.navlink {
  color: #C2D6DD;
  }

a:visited.navlink {
  color: #C2D6DD;
  }

a:hover.navlink {
  color: #ED7312;
  }

div.main {
  min-height: 500px;
  width: 940px;
  margin: 0 auto;
  border: 0;
  padding: 0;
  }

div.wrapper {
  width: 920px;
  margin: 0 auto;
  border: 0;
  padding: 0 0 0 20px;
  }

.splitleft {
  float: left;
  width: 460px;
  margin: 0 auto;
  border: 0;
  }

.splitright {
  float: right;
  width: 460px;
  margin: 0 auto;
  border: 0;
  }

footer {
   margin: 0 auto;
   width: 940px;
   height: 60px;
   border-top-style: solid;
   border-top-width: 1px;
   border-top-color: #0F6B8F;
   position: relative;
   padding: 20px 0 0 0;
   display: block;
}


/* TABLE STYLING SECTION */

table {
  padding: 0 0 10px 20px;
  font-family: 'Lato', sans-serif;
  font-size: 0.8em;
  border-spacing: 15px;
  }

table.border {
  padding: 0 0 10px 20px;
  font-family: 'Lato', sans-serif;
  font-size: 0.8em;
  border-spacing: 0;
  border-collapse: collapse;
  border-bottom: 2px solid #000000;
  }

tr.fifth:nth-of-type(5n+1) {
  border-bottom: 1px solid #000000;
  }

.colwide {
  width: 180px;
  }

.colmed {
  width: 120px;
  }

.colthin {
  width: 60px;
  }

.left {
  text-align: left;
  }

.center {
  text-align: center;
  }

.right {
  text-align: right;
  }

th.border {
  border-bottom: 2px solid #000000;
  font-weight: bold;
  padding: 5px 5px 5px 5px;
  }

td.LftLightRtLight {
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  padding: 5px 5px 5px 5px;
  }

td.LftHeavyRtLight {
  border-left: 2px solid #000000;
  border-right: 1px solid #000000;
  padding: 5px 5px 5px 5px;
  }

td.LftLightRtHeavy {
  border-left: 1px solid #000000;
  border-right: 2px solid #000000;
  padding: 5px 5px 5px 5px;
  }  


/* TEXT STYLING SECTION */

h3 { 
  color: #ED7312;
  font-size: 2.5em;
  font-family: sans-serif;
  margin: 0 auto;
  border: 0;
  padding: 0 0 10px 0;
  }

h4 {
  color: #0F6B8F;
  font-size: 1.8em;
  font-family: sans-serif;
  margin: 0 auto;
  border: 0;
  padding: 0 0 10px 0;
  }

h5 {
  color: #ED7312;
  font-size: 1.4em;
  font-family: sans-serif;
  margin: 0 auto;
  border: 0;
  padding: 0 0 10px 0;
  }

p#Title {
  color: #ED7312;
  font-family: sans-serif;
  font-size: 3.5em;
  text-align: right;
  margin-bottom: -0.5em;
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 40px;
  }

p#Byline {
  color: #4EC8F8;
  font-family: sans-serif;
  font-style: italic;
  font-size: 1.8em;
  margin: 0;
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 40px;
  }

p#Welcome {
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  margin: 0;
  border: 0;
  padding: 25px 0 10px 0;
  }

p#AddSection {
  font-family: sans-serif;
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  border: 0;
  padding: 0 0 20px 60px;
  }

p#Footer {
  font-family: sans-serif;
  font-size: 0.75em;
  margin: 0;
  border: 0;
  padding-top: 5px;
  padding-bottom: 20px;
  }

a:link {
  color: #000000;
  }

a:visited {
  color: #000000;
  }

a:hover {
  color: #ED7312;
  }

.center {
  text-align: center;
  }

.left {
  text-align: left;
  }

下面是我的HTML（我尝试只使用HTML5）：

我的网站：概述
我的网站
在那里你可以倾倒你所有的垃圾！






欢迎光临！您可以访问以下内容：

主题
年
可乐
可乐
可乐
可乐
可乐
04/14/2014
C
6.
满的
进行中
整体表现
人
事情1
事情2
事情3
事情4
事情5
事情6
事情7
事情8
事情9
JF
38
46.63
6.
6.
5.
17
51.95
98.58
4.
JF
38
46.63
6.
6.
5.
17
51.95
98.58
4.
JF
38
46.63
6.
6.
5.
17
51.95
98.58
4.
JF
38
46.63
6.
6.
5.
17
51.95
98.58
4.
JF
38
46.63
6.
6.
5.
17
51.95
98.58
4.
JF
38
46.63
6.
6.
5.
17
51.95
98.58
4.
JF
38
46.63
6.
6.
5.
17
51.95
98.58
4.
JF
38
46.63
6.
6.
5.
17
51.95
98.58
4.
JF
38
46.63
6.
6.
5.
17
51.95
98.58
4.
JF
38
46.63
6.
6.
5.
17
51.95
98.58
4.
JF
38
46.63
6.
6.
5.
17
51.95
98.58
4.
JF
38
46.63
6.
6.
5.
17
51.95
98.58
4.
JF
38
46.63
6.
6.
5.
17
51.95
98.58
4.
表演
属性1
#poss
百分比
应收
3.
63%
应收
3.
63%
应收
3.
63%
应收
3.
63%
应收
3.
63%
应收
3.
63%
应收
3.
63%
应收
3.
63%
应收
3.
63%
应收
3.
63%
应收
3.
63%
应收
3.
63%
应收
3.
63%
&169；2013年我的网站
*Howdy是Howdy Doody的注册商标，它不参与本产品的生产，也不支持本产品

我创建了这个JSFIDLE，它显示了问题：

非常感谢您的帮助！我打赌这个解决方案是我忽略了的一个非常愚蠢的东西

提前谢谢

---

另外，如果你看到我的代码中有任何其他不正常的地方，我很乐意倾听你的想法

您没有关闭页面最后一个表的

表

标记。相反，你关闭了一个部门

您还将注意到，由于

splitleft

元素是浮动的，

wrapper

元素没有高度

您可以将

overflow:auto

添加到包装器类，或者，以更好的方式，但不兼容每个IE版本，将以下内容添加到css：

.wrapper:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

---

谢谢这就做到了，这是难以置信的愚蠢。我猜有时需要另一双眼睛…@user2626357还有，在某个时候，你用了好几次ID

.wrapper:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}