2014-08-31 85 views
0

我一直在尋找解決方案,因爲這是一個常見問題。 所有這些都爲別人工作的「解決方案」並沒有爲我工作:(CSS/HTML - 頁腳不會留在頁面底部

這是我的index.html文件的正文:

<body> 
     <div id="header"> 
     <table width="100%" height="auto" border="0"> 
    <tr> 
     <td><h1 id="logo"><a href="#">WEBSITE</a></h1></td> 
     <td><div id="navigation"> 
      <ul> 
       <a href="#"><li>HOME</li></a> 
       <a href="#"><li>FORUM</li></a> 
       <a href="#"><li>NEWS</li></a> 
       <a href="#"><li>INFORMATION</li></a> 
       <a href="#"><li>GALLERY</li></a> 
       <a href="#"><li>STAFF APPLICATIONS</li></a> 
       <a href="#"><li>CONTACT US</li></a> 
      </ul> 
     </div></td></tr></table> 
    </div> 
    <div id="announcement"> 
     <center> 
     <p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p> 
     </center> 
    </div> 
    <div id="slider"> 
     <center> 
     <h1>IMAGE SLIDER COMING SOON</h1> 
     </center> 
    </div> 
    <div id="featured"> 
    <table width="100%" height="100%" border="0"> 
     <center> 
     <tr> 
     <!-- Column 1 --> 
     <td align="center" valign="top"><div id="thumbnail"> 
      <img src="images/logo.png" alt="" title="1" width="100px" height="100px" /> 
      <h3>Our Community, Your Community</h3> 
      <p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p> 
      <a href="#">Register</a> 
     </div></td> 
     <!-- Column 2 --> 
     <td align="center" valign="top"><div id="thumbnail"> 
      <img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" /> 
      <h3>Virus & Spyware Free</h3> 
      <p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not 
      at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p> 
     </div></td> 
     <!-- Column 3 --> 
     <td align="center" valign="top"><div id="thumbnail"> 
      <img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" /> 
      <h3>Free Open-Source Projects</h3> 
      <p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create 
      are open-sourced which means the source code is available to the public to use however they want as long as they leave 
      credits in the project that they created! The projects we create can range between Websites, programs and on special 
      occasions, games.</p> 
      <a href="#">Read More</a> 
     </div></td> 
     </center> 
    </div> 
    <div id="footer"> 
    Test 
    </div> 
</body> 

這是我的CSS頁腳:

#footer { 
clear: both; 
position: relative; 
z-index: 10; 
height: 3em; 
margin-top: -3em; 
background-color: red; 

}

如果有人知道我怎麼能解決這個話請說,

在先進的感謝

獨特

+0

表標籤不關閉在HTML表單 – Kishan 2015-06-03 07:06:38

回答

2

我已經解決了您的問題。我花了幾個小時給你,我得到頁腳底部頁腳的解決方案。

Live Working Demo

HTML代碼:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="header"> 
     <table width="100%" height="auto" border="0"> 
      <tr> 
       <td><h1 id="logo"><a href="#">WEBSITE</a></h1></td> 
       <td><div id="navigation"> 
        <ul> 
         <a href="#"><li>HOME</li></a> 
         <a href="#"><li>FORUM</li></a> 
         <a href="#"><li>NEWS</li></a> 
         <a href="#"><li>INFORMATION</li></a> 
         <a href="#"><li>GALLERY</li></a> 
         <a href="#"><li>STAFF APPLICATIONS</li></a> 
         <a href="#"><li>CONTACT US</li></a> 
        </ul> 
       </div></td></tr></table> 
    </div> 
    <div id="content"> 
     <div id="announcement"> 
      <center> 
       <p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p> 
      </center> 
     </div> 
     <div id="slider"> 
      <center> 
       <h1>IMAGE SLIDER COMING SOON</h1> 
      </center> 
     </div> 
     <div id="featured"> 
      <table width="100%" height="100%" border="0"> 
       <center> 
        <tr> 
         <!-- Column 1 --> 
         <td align="center" valign="top"><div id="thumbnail"> 
          <img src="images/logo.png" alt="" title="1" width="100px" height="100px" /> 
          <h3>Our Community, Your Community</h3> 
          <p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p> 
          <a href="#">Register</a> 
         </div></td> 
         <!-- Column 2 --> 
         <td align="center" valign="top"><div id="thumbnail"> 
          <img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" /> 
          <h3>Virus & Spyware Free</h3> 
          <p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not 
           at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p> 
         </div></td> 
         <!-- Column 3 --> 
         <td align="center" valign="top"><div id="thumbnail"> 
          <img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" /> 
          <h3>Free Open-Source Projects</h3> 
          <p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create 
           are open-sourced which means the source code is available to the public to use however they want as long as they leave 
           credits in the project that they created! The projects we create can range between Websites, programs and on special 
           occasions, games.</p> 
          <a href="#">Read More</a> 
         </div></td> 
       </center> 
     </div> 
    </div> 
    <div id="footer"> 
    This is footer Section 
    </div> 
</div> 
</body> 
</html> 

CSS代碼:

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#wrapper { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    padding:10px; 
    background:white; 
} 
#content { 
    padding:10px; 
    padding-bottom:80px; /* Height of the footer element */ 
} 
#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:red; 
    color:white; 
} 

結果:

Result

+0

我剛剛將所有代碼上傳到JSFIDDLE,我將代碼更改爲代碼,但頁腳仍然沒有進入底部,它留在3列下留下頁腳下方的空間。 http://jsfiddle.net/92zsmby6/ – Unique 2014-08-31 12:42:00

+0

我再次解決你的問題,花一些時間給你。你可以在這裏找到http://jsfiddle.net/kalusingh/92zsmby6/3/,如果你喜歡它,然後接受幫助別人的答案。 – Developer 2014-08-31 15:57:55

+0

@Singh第二個表標記不能以您的html格式關閉 – Kishan 2015-06-03 07:23:46

1

我不知道你在找什麼做的。您是否正在尋找頁面底部不可移動的頁腳,以便當頁面的其餘部分滾動時不會發生?或者您是否希望將頁腳放在桌子下面,並且與網站的其他部分一起滾動?

如果您正在尋找前者,你需要改變「相對」到「絕對」,並確保你的左側,右側和底部邊距設置爲0。

如果你只是想頁腳留在該表下,剩下的代碼需要看看它是如何與其他元素及其CSS樣式進行交互的。

+0

我希望它norally滾動,我不希望它固定。 – Unique 2014-08-31 02:29:40

+0

並且我已經完成了這個,#footer { \t明確:兩者; position:absolute; z-index:10; height:100px; left:0; right:0; bottom:0; \t background-color:red; } – Unique 2014-08-31 02:30:19

+0

但仍無效 – Unique 2014-08-31 02:30:35

1

瞭解定位訪問http://www.w3schools.com/css/css_positioning.asp

我跑你的代碼和相對定位是在我的chrome瀏覽器工作正常。請設置頁面正文的元素位置,以使其相對。

1.更改你的CSS代碼

#footer { 
clear: both; 
z-index: 10; 
height: 3em; 
margin-top: -3em; 
background-color: red; 
position:relative; //or any of the other positions as per your page 
} 

2.One更多的東西,像我一樣,你所能做的就是設置你的頁腳樣式,內嵌樣式,像這樣

<div style="clear:both;z-index:10; height:3em; margin-top:-3em; background-color:red; position:relative;"> 
Test 
</div> 

3。如果內聯樣式不起作用,請轉到內部樣式,將頁腳樣式設置爲樣式標籤嵌入在頭部標籤

4.您需要將div標籤保留在主div標籤之外。保持它作爲一個單獨的元素,而不是另一個元素的孩子。我在處理我的項目時遇到了類似的問題,並改變了標籤的位置和身體結構。你只需要有耐心,並繼續嘗試不同的方法。

+0

你的答案大部分都是從[here](http://www.letsdnd.com/position-elements/)複製的,請將鏈接發佈到內容或至少提及你的來源。 – nishantjr 2014-08-31 03:20:53

+0

我試圖發佈鏈接,但我couldnt所以我複製並粘貼在這裏幫助。最初我嘗試發佈鏈接,但我的瀏覽器不會讓我。我跑他的代碼和位置:親戚對我工作得很好。我試圖發佈截圖,但其上傳時間過長。 – 2014-08-31 03:26:24

+0

我已經編輯了鏈接到報價的答案,並在複製的內容周圍使用了'blockquotes',以便您瞭解如何完成。 – nishantjr 2014-08-31 03:38:07

0

你不閉上你的標籤

Demo添加後

<html> 
<head> 
<style> 
#footer { 
clear: both; 
position: relative; 
z-index: 10; 
height: 3em; 
margin-top: -3em; 
background-color: red; 
} 
</style> 
</head> 
<body> 
     <div id="header"> 
     <table width="100%" height="auto" border="0"> 
    <tr> 
     <td><h1 id="logo"><a href="#">WEBSITE</a></h1></td> 
     <td><div id="navigation"> 
      <ul> 
       <a href="#"><li>HOME</li></a> 
       <a href="#"><li>FORUM</li></a> 
       <a href="#"><li>NEWS</li></a> 
       <a href="#"><li>INFORMATION</li></a> 
       <a href="#"><li>GALLERY</li></a> 
       <a href="#"><li>STAFF APPLICATIONS</li></a> 
       <a href="#"><li>CONTACT US</li></a> 
      </ul> 
     </div></td></tr></table> 
    </div> 
    <div id="announcement"> 
     <center> 
     <p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p> 
     </center> 
    </div> 
    <div id="slider"> 
     <center> 
     <h1>IMAGE SLIDER COMING SOON</h1> 
     </center> 
    </div> 
    <div id="featured"> 
    <table width="100%" height="100%" border="0"> 
     <center> 
     <tr> 
     <!-- Column 1 --> 
     <td align="center" valign="top"><div id="thumbnail"> 
      <img src="images/logo.png" alt="" title="1" width="100px" height="100px" /> 
      <h3>Our Community, Your Community</h3> 
      <p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p> 
      <a href="#">Register</a> 
     </div></td> 
     <!-- Column 2 --> 
     <td align="center" valign="top"><div id="thumbnail"> 
      <img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" /> 
      <h3>Virus & Spyware Free</h3> 
      <p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not 
      at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p> 
     </div></td> 
     <!-- Column 3 --> 
     <td align="center" valign="top"><div id="thumbnail"> 
      <img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" /> 
      <h3>Free Open-Source Projects</h3> 
      <p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create 
      are open-sourced which means the source code is available to the public to use however they want as long as they leave 
      credits in the project that they created! The projects we create can range between Websites, programs and on special 
      occasions, games.</p> 
      <a href="#">Read More</a> 
     </div></td> 
     </center> 
     </table> 
    </div> 
    <div id="footer"> 
    Test 
    </div> 
</body> 
</html>