如何在不使用頁腳標籤的情況下將頁腳對齊到頁面底部

我是初學者，我有疑問。有什麼方法可以通過使用表格將頁腳放置在底部？這將有助於如何在不使用頁腳標籤的情況下將頁腳對齊到頁面底部

<table> 
    <tr><h2><img src="lock.jpg" width="80" height="30"/>Welcome to Locker</h2></tr>  
    <tr><td> 
<table align="center"> 

<tr> 
<td align="right"><h4><p> Lock name:</p></h4> 
</td> 

<td align="left"> 
    <h4><input type="text" maxlength="8" name="lock" onkeyup="return AllowLock()"/> 
</h4></td> 
<td> 
<h6 id="errfn"> </h6> 
</td> 
    </tr> 
<tr> 
<td align="right"><h4><p> Key:</p></h4></td> 
    <td align="left"><h4><input type="text" maxlength="8" name="keys" onkeyup="return AllowKey()"/> 
</h4></td> 
<td> 
<h6 id="error"></h6></td> 
    </tr> 
<tr> 
<td align="right"></td> 
    <td align="left"><input id="gobutton" type="submit" value="Go!"/></td> 
</tr> 

    </form> 
    </table> 
     </td></tr> 
     <tr><td> 
<p id="about">About</p> 
<p id="contact">Contact us</p> 
<p id="career">Careers</p> 
    <p id="press">Press</p> 
</tr> 
</td> 
</table>

來源

2013-09-25 Ashok kumar

不容易。基於表格的佈局已經不再受歡迎，如果你想使用更多的語義結構，將頁腳固定到底部將會非常簡單。 –

這裏http://jsfiddle.net/25LKc/

看看使用<div></div>作爲包裝

有固定的位置;

 <!-- your html here --> 
    </td> 
</table> 

<div class="footer"></div> 

<style type="text/css"> 
.footer { 
    background-color:orange; 
    width:100%; 
    height:400px; 
    position:fixed; 
    bottom:0px; 
} 
</style>

來源

2013-09-25 11:47:32 caramba

你可以使用一些CSS和一些HTML來放置它，在你的表標籤有：

，然後它上面有一些代碼，如CSS：

<script> 
.table { 
    position:fixed; 
    bottom:0px; 
} 
</script>

這會將表格放在底部

來源

2013-09-25 11:49:56

回答你的問題，你的表格佈局有100％的高度，你需要設置一些CSS屬性：

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#my_table { 
    height: 100%; 
}

而在HTML：

<table id="my_table">...</table>

來源

2013-09-25 11:51:43

您可以只需添加這個CSS用於任何類或ID的任何元素放置在底部。

 //CSS 
{ 
position:fixed; /*Set this to absolute if you do not want it to be on bottom always*/ 
width:100%; 
bottom:0px; 
left:0px; 
height:80px; 
}

//實際使用

<html> 
<head> 
<style type="text/css"> 
.footer { 
    position: fixed; 
    width: 100%; 
    bottom: 0px; 
    left: 0px; 
    background: rgb(216, 216, 216); 
    height: 80px; 
    text-align: center; 
} 

.content { 
    position: relative; 
    width: 100%; 
    background: rgb(16, 16, 85); 
    height: 600px; 
    margin-bottom: 100px; 
    color: white; 
} 
</style> 
</head> 
<body> 

    <!--Page Content--> 
    <div class="content"> 
     <table align="center"> 
      <tr> 
       <td>Sample1</td> 
       <td>Sample2</td> 
      </tr> 
      <tr> 
       <td>Sample1</td> 
       <td>Sample2</td> 
      </tr> 
     </table> 
    </div> 
    <!--Footer Table--> 
    <table class="footer"> 
     <td>Footer Goes Here</td> 
    </table> 
</body> 
</html>

的jsfiddle例子中，我創建：http://jsfiddle.net/mm6qc/

來源

2013-09-25 11:52:06

它工作，但我需要這些頁腳彼此相鄰，但它與另一個重疊。我需要爲此做什麼？ –

檢查更新後的代碼，並參考我創建的jsfiddle示例。 –

如何做到不用頁腳標籤和css？我只能在表格中使用rowspan和colspan嗎？我們能用這個嗎？ –

如何在不使用頁腳標籤的情況下將頁腳對齊到頁面底部

回答

相關問題