HTML頁腳不留在頁面的底部

我做了一個HTML頁面，其中包括一個標題，3列（左，主和右）和頁腳。在主欄中我有一個高度爲100％的桌子，非常大。現在我想讓我的腳在桌子下面。HTML頁腳不留在頁面的底部

我不知道什麼是錯，但我的頁腳不是放在底部，在我的情況下，它幾乎在主表的中間。

html，body和main類也被設置爲高度100％，所以工作完美。唯一的問題是頁腳..

根據要求，這裏是一些代碼：

<body> 
<div id="wrap"> 
<div id="hoofding"></div> 
<div id="inner-wrap"> 
<div id="navigatie" style="font-family:old stamper"> 
    <a href="index.html" class="C1"><font size="9">Home</font></a> 
</div> 
<div id="main"> 
<div id="right"></div> 
<table id= "tabel1"> 
<div id="inhoud"> 
<tr><td><p style="font-family:army of darkness"><font size="30">Lettertype 1: The Quick Brown Fox</font></p></td></tr>    
<tr><td><p style="font-family:USSR army"><font size="30">Lettertype 2: The Quick Brown Fox</font></p></td></tr> 
</div> 
</table> 
</div> 
</div> 
</div> 
<div id="footer"><font size="1">Copyright &copy 2013 The Pack</font></div> 
</body>

而CSS文件：

html {height:100%; width: 100%;} 

    body { 
    margin:0; 
    padding:0; 
    height:100%; 
    width: 100%; 
    background-color: blue; 
    } 

    #hoofding{ 
    margin-right: auto; 
    margin-left: auto; 
    height: 355px; 
    width: 620px; 
    background-image: url(Afbeeldingen/The%20Pack.png); 
    } 
    #navigatie{ 
     z-index: 15; 
     position: fixed; 
    height: 50px; 
    width: 8%; 
    margin-right: auto; 
    margin-left: auto; 
    padding-right: 1%; 
    padding-left: 1%; 
    } 
#inhoud{ 
     z-index: 2; 
    position: absolute; 
    padding-top: 3%; 
    padding-bottom: 3%; 
    } 

    #tabel1{ 
     height: 100%; 
    width: 70%; 
    z-index: 1; 
    background-image: url(Afbeeldingen/Inhoud.png); 
    margin-left: auto; 
    margin-right: 15%; 
    bottom: 0; 
    padding:15px; 
    } 

    #wrap { 
     position:relative; 
     min-height:100%; 
     } 
    * html #wrap {height:100%; width:100%} 

    #inner-wrap { 
     padding-bottom:20px; 
     } 
    #inner-wrap:after { 
     content:" "; 
     display:block; 
     clear:both; 
     } 
    #footer { 
     position:absolute; 
     height:18px; 
     background-color: red; 
     bottom:0px; 
     color:white; 
     text-align:center; 
     clear:both; 
      } 

    #left { 
     position:fixed; 
     float:left; 
     width:10px; 
     text-align:center; 
     } 
    #main { 
     position:absolute; 
     margin-left:10px; 
     margin-right:10px; 
     width: 100%; 
     height: 100%; 
     } 

    #right { 
     float:right; 
     width:10px; 
     text-align:center; 
     } 
    #content { 
    padding:5px; 
    margin-right:10px; 
    text-align:left; 
     }

謝謝

來源

2013-06-11 misterkill38

你能製造一個JsFiddle嗎？鏈接[JsFiddle]（http://www.jsfiddle.net） –

我從來沒有這樣做過，但我會嘗試。請稍等，我試圖弄清楚。 – misterkill38

填寫您的HTML（左邊框）和Css（右邊框），然後按保存..您可以複製網址並將其粘貼到此處 –

嘗試：

#footer{ 
    position:absolute; 
    bottom: 0px; 
    text-align: center; 
}

來源

2013-06-11 17:39:58

這不起作用，它使情況變得更糟..現在頁腳被放置在屏幕的底部，當我滾動它時，它會向上移動。而且文本位於左側而不是中間。 – misterkill38

現在檢查出來！順便說一句，你不想讓它堅守底部？ –

那也行不通。是的，我想在底部，但在屏幕的底部而不是屏幕。在我的屏幕停止的地方放置了頁腳，但是我的頁面更長，所以我必須向下滾動才能看到頁面的結尾，那是我想要的頁腳。 – misterkill38

使用

bottom: 0;

而不是

margin-bottom: 0;

我認爲它會爲你工作。

來源

2013-06-11 17:40:55 wakqasahmed

這不起作用，頁腳停留在同一個地方？ – misterkill38

如果你分享更多的代碼，這將是很好的。 – wakqasahmed

HTML頁腳不留在頁面的底部

回答

相關問題