如何使用表格佈局修復頁腳底部？

我一直在嘗試使用粘腳的表格佈局很長一段時間。我的要求是頁腳應該固定在底部，而我會放大或縮小。但是當我放大網頁時，頁腳會轉到內容部分或以其他方式固定在底部，但我看不到頁腳的左側。如何使用表格佈局修復頁腳底部？

2014-03-03 Binni

相同的代碼發佈您的代碼（HTML和CSS），所以我們可以幫助你。 –

嘗試編碼在http://somacss.com/layouts/stickyfooter_table.html

我已經粘貼下面

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Layout: sticky footer table layout </title> 

    <style type="text/css"> 
     html,body{height:100%;margin:0;} 
     #container{ 
      table-layout:fixed;border-collapse:collapse; 
      height:100%;width:100%;background:#FCD116; 
     } 
     #container td{padding:0;} 
     /* ie 6/7 needs some top/bottom padding on footer for margin of children to show */ 
     #container #content, #footer{padding:1em;} 

     #content{vertical-align:top;} 
     #footwrap{vertical-align:bottom;} 
     #footer{ 
      background:#555;overflow:hidden; 
     } 
     #content h1{text-align:center;} 
    </style> 
    <!--[if IE 7]> 
    <style type="text/css"> 
     #footer{overflow:visible;} 
    </style> 
    <![endif]--> 
</head> 
<body> 
    <table id="container"> 
     <tr><td id="content"> 
      <h1>sticky footer table layout</h1> 
      <p>Puppies are better then kittens because they are more loyal and dumber and don't wake you up in middle of the night. But kittens are better because they are cuter and go outside to pee.</p> 
      <p>Puppies are better then kittens because they are more loyal and dumber and don't wake you up in middle of the night. But kittens are better because they are cuter and go outside to pee.</p> 
      <p>Puppies are better then kittens because they are more loyal and dumber and don't wake you up in middle of the night. But kittens are better because they are cuter and go outside to pee.</p> 
      <p>Puppies are better then kittens because they are more loyal and dumber and don't wake you up in middle of the night. But kittens are better because they are cuter and go outside to pee.</p> 
      <p>Puppies are better then kittens because they are more loyal and dumber and don't wake you up in middle of the night. But kittens are better because they are cuter and go outside to pee.</p> 
     </td></tr> 

     <tr><td id="footwrap"> 
      <div id="footer"> 
       <p>This is a tables sticky footer. <br>We don't have to set its height.</p> 
      </div> 
     </td></tr> 
    </table> 
</body> 
</html>

來源

2014-03-03 11:17:39 gnanz

如何使用表格佈局修復頁腳底部？

回答

相關問題