页面中间是非粘性页脚，中断前一个div

Question

我是网站设计的新手，所以请保持温柔。我正在尝试设计一个相当简单的页面，其中每个元素都遵循前一个 - 没有浮动，没有绝对定位，也没有粘性页脚。基本上，我只是希望页脚出现在页面的末尾（而不是屏幕的底部），当它现在出现在另一个元素的中间时。尽管经过广泛的搜索和阅读，我无法弄清楚我做错了什么...

这是我的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（我只想使用HTML 5）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MyWebsite: Overview</title>
    <meta name="description" content="MyWebsite: Overview">
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <header>
      <p id='Title'>MyWebsite</p>
      <p id='Byline'>Where you can dump all your crap!</h2>
    </header>
    <nav>
      <ul>  
        <li><a class='navlink' href="/myhome.html">MyHome</a></li>  
        <li><a class='navlink' href="/myinfo.html">MyInfo</a></li>  
        <li><a class='navlink' href="/support.html">Support</a></li>  
        <li><a class='navlink' href="/shop.html">Shop</a></li>  
      </ul>  
    </nav>
    <div class="main">     
      <p id='Welcome'>Welcome <a href="/myhome.html">User Name</a>! You have access to the following:</p>
      <h3>Subject</h3>
      <div class="wrapper">
        <h4>Year</h4>
        <table>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
            <th>Col5</th>
          </tr>
          <tr>
            <td class='center'>04/14/2014</td>
            <td class='center'>C</td>
            <td class='center'>6</td>
            <td class='center'>Full</td>
            <td class='center'>In progress</td>
            <td class='center'><a href=#>Grid</a></td>
            <td class='center'><a href=#>New</a></td> 
            <td class='center'><a href=#>Edit</a></td> 
            <td class='center' class='heavy'><a href=#>Submit</a></td> 
          </tr>
        </table>        
        <h5>Overall Performance</h5>
        <table class='border'>
          <tr class='fifth'>
            <th class='border colwide'>Person</th>
            <th class='border colthin'>Thing 1</th>
            <th class='border colthin'>Thing 2</th>
            <th class='border colthin'>Thing 3</th>
            <th class='border colthin'>Thing 4</th>
            <th class='border colthin'>Thing 5</th>
            <th class='border colthin'>Thing 6</th>
            <th class='border colthin'>Thing 7</th>
            <th class='border colthin'>Thing 8</th>
            <th class='border colthin'>Thing 9</th>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr>
           <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr>
        </table>
      </div>
      <div class="wrapper">
        <div class="splitleft">
          <h5>Performance</h5>
          <table class='border'>
          <tr class='fifth'>
            <th class='border colwide'>Attribute 1</th>
            <th class='border colthin'># poss</th>
            <th class='border colthin'>percent</th>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
        </div>
      </div>
    </div>   
    <footer>
      <p id='Footer'>&#169; 2013 MyWebsite</p>
      <p id='Footer'>*  Howdy is a registered trademark of Howdy Doody, which was not involved in the production of, and does not endorse this product.</p>
    </footer>
  </body>  
</html>

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

http://jsfiddle.net/QX8zU/

非常感谢任何帮助！我认为解决方案是令人难以置信的愚蠢，我忽略了......

提前致谢！

P.S。如果您看到我的代码中有任何其他棘手的方面，我非常愿意听到您的想法！

Answer 1

您没有关闭页面最后一个表格的table标记。相反，你关闭了一个div。

您还会注意到，由于您的splitleft元素已浮动，因此wrapper元素没有高度。

您可以将overflow:auto添加到包装器类中，或者以更好的方式，但与每个IE版本不兼容，将其添加到您的css：

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