非粘性頁腳中間的頁面，中斷以前的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; 
}