Warum gibt es zu wenig Speicherplatz am Ende meiner Website?

Question

Ich versuche gerade, mir beizubringen, responsive Websites zu erstellen. Ich benutze Zurbs Foundation 6 und habe es tatsächlich geschafft, eine einfache Website zusammenzustellen, aber ich habe ein Problem mit dem Abstand am Ende der Seite.

Der Problembereich ist mit den "Seitenumbruch" und "Fußzeile" Abschnitte meiner Seite.

Die Seite kann bei test.allvixen.com und mein Code sieht aus wie sehen:

<div class="large-12 columns"> 
    <center> 
      <nav class="pagination"> 
      <ul> 
       <li><a href="" rel="nofollow">&laquo; First</a></li> 
       <li><a href="" rel="nofollow">&lsaquo; Back</a></li> 
       <li>1</li> 
       <li><a href="" rel="nofollow">2</a></li> 
       <li><a href="" rel="nofollow">3</a></li> 
       <li><a href="" rel="nofollow">4</a></li> 
       <li><a href="" rel="nofollow">5</a></li> 
       <li><a href="" rel="nofollow">6</a></li> 
       <li><a href="" rel="nofollow">7</a></li> 
       <li><a href="" rel="nofollow">8</a></li> 
       <li><a href="" rel="nofollow">9</a></li> 
       <li><a href="" rel="nofollow">10</a></li> 
       <li><a href="" rel="nofollow">11</a></li> 
       <li><a href="" rel="nofollow">12</a></li> 
       <li><a href="" rel="nofollow">13</a></li> 
       <li><a href="" rel="nofollow">14</a></li> 
       <li><a href="" rel="nofollow">15</a></li> 
       <li> . . . </li> 
       <li><a href="" rel="nofollow">94</a></li> 
       <li><a href="" rel="nofollow">95</a></li> 
       <li><a href="" rel="nofollow">96</a></li> 
       <li><a href="" rel="nofollow">Next &rsaquo;</a></li> 
       <li><a href="" rel="nofollow">Last &raquo;</a></li> 
      </ul> 
     </nav> 
    </div> 

    <div class="large-12 columns"> 
    <div id="footer"> 
     &copy; 2013 - <a href="http://allvixen.com/">allvixen.com</a> 
     </div> 
     </center> 

     </div> 

ich nicht herausfinden kann, wie zu reduzieren oder die Lücke zwischen der Seite Paginierung und dem Copyright-Hinweis zu schließen. Ich kann auch nicht herausfinden, warum ich unter dem Copyright-Hinweis so viel Platz habe.

Kann jemand so freundlich sein, einen Ratschlag zu geben, was ich falsch gemacht habe oder wo ich mehr über dieses spezifische Problem erfahren kann und wie ich es korrigieren kann?

Answer 1

Die Klasse columns hat eine Mindesthöhe von 350px. Dadurch wird das letzte Spaltenelement größer als es sein sollte.

Für columns, dass Sie keine Mindesthöhe haben möchten, setzen Sie min-height:0px;.

Beispiel:

.columns:last-child { 
    min-height:0px; 
} 

Answer 2

Mitte Tag muss an der richtigen Stelle sein. Auch http://test.allvixen.com/ hat app.css mit Spalten Klasse, die es min-height hat: 350px. Löschen Sie die Mindesthöhe.

<center> 
 

 
<div class="large-12 columns"> 
 
      <nav class="pagination"> 
 
      <ul> 
 
       <li><a href="" rel="nofollow">&laquo; First</a></li> 
 
       <li><a href="" rel="nofollow">&lsaquo; Back</a></li> 
 
       <li>1</li> 
 
       <li><a href="" rel="nofollow">2</a></li> 
 
       <li><a href="" rel="nofollow">3</a></li> 
 
       <li><a href="" rel="nofollow">4</a></li> 
 
       <li><a href="" rel="nofollow">5</a></li> 
 
       <li><a href="" rel="nofollow">6</a></li> 
 
       <li><a href="" rel="nofollow">7</a></li> 
 
       <li><a href="" rel="nofollow">8</a></li> 
 
       <li><a href="" rel="nofollow">9</a></li> 
 
       <li><a href="" rel="nofollow">10</a></li> 
 
       <li><a href="" rel="nofollow">11</a></li> 
 
       <li><a href="" rel="nofollow">12</a></li> 
 
       <li><a href="" rel="nofollow">13</a></li> 
 
       <li><a href="" rel="nofollow">14</a></li> 
 
       <li><a href="" rel="nofollow">15</a></li> 
 
       <li> . . . </li> 
 
       <li><a href="" rel="nofollow">94</a></li> 
 
       <li><a href="" rel="nofollow">95</a></li> 
 
       <li><a href="" rel="nofollow">96</a></li> 
 
       <li><a href="" rel="nofollow">Next &rsaquo;</a></li> 
 
       <li><a href="" rel="nofollow">Last &raquo;</a></li> 
 
      </ul> 
 
     </nav> 
 
    </div> 
 

 
    <div class="large-12 columns"> 
 
    <div id="footer"> 
 
     &copy; 2013 - <a href="http://allvixen.com/">allvixen.com</a> 
 
     </div> 
 

 
     </div> 
 
</center>