html頁腳出現在包裝內？

我嘗試了明確：既和身體位置相對，但仍然是其處處顯示着包裝出於某種原因裏面上漲，任何幫助將不勝感激html頁腳出現在包裝內？

這裏是的jsfiddle代碼：

這裏是我工作的代碼：

<center> 
    <img src="images/eshop.jpg" width="800px" height="120px"/> 
</center> 
<div id="menu"> 
    <ul class="navigation"> 
    <li> 
     <a href="#" > 
     HOME 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
     HOT ITEMS 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
     SELL TO US 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
     ABOUT US 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
     CONTACT 
     </a> 
    </li> 
    </ul> 
</div> 
<div id="wrap"> 
    <center> 
    <div class="box"> 
     <h3> 
     Neutrogena Body Wash 
     </h3> 
     <p float="left"> 
     <img src="images/item1.jpg" width="50%" height="200px" alt="item1"/> 
     </p> 
     <h4> 
     3$ 
     </h4> 
    </div> 
    <div class="box"> 
     <h3> 
     Summer Boots 
     </h3> 
     <p float="left"> 
     <img src="images/item2.png" width="50%" height="200px" alt="item2"/> 
     </p> 
     <h4> 
     5$ 
     </h4> 
    </div> 
    <div class="box"> 
     <h3> 
     Samsung Galaxy S4 
     </h3> 
     <p float="left"> 
     <img src="images/item3.jpg" width="50%" height="200px" alt="item3"/> 
     </p> 
     <h4> 
     500$ 
     </h4> 
    </div> 
    <div class="box"> 
     <h3> 
     Liquid Perfume 
     </h3> 
     <p float="left"> 
     <img src="images/item4.gif" width="50%" height="200px" alt="item4"/> 
     </p> 
     <h4> 
     10$ 
     </h4> 
    </div> 
    <div class="box"> 
     <h3> 
     ASUS Laptop i3 
     </h3> 
     <p float="left"> 
     <img src="images/item5.png" width="50%" height="200px" alt="item5"/> 
     </p> 
     <h4> 
     400$ 
     </h4> 
    </div> 
    <div class="box"> 
     <h3> 
     Sony PS2 VGA 
     </h3> 
     <p float="left"> 
     <img src="images/item6.jpg" width="50%" height="200px" alt="item6"/> 
     </p> 
     <h4> 
     7$ 
     </h4> 
    </div> 
    <div class="box"> 
     <h3> 
     8GB Memory Card 
     </h3> 
     <p float="left"> 
     <img src="images/item7.jpg" width="50%" height="200px" alt="item7"/> 
     </p> 
     <h4> 
     12$ 
     </h4> 
    </div> 
    <div class="box"> 
     <h3> 
     2GB DDR3 RAM 
     </h3> 
     <p float="left"> 
     <img src="images/item8.jpg" width="50%" height="200px" alt="item8"/> 
     </p> 
     <h4> 
     20$ 
     </h4> 
    </div> 
    <div class="box"> 
     <h3> 
     50" LED TV 
     </h3> 
     <p float="left"> 
     <img src="images/item9.jpg" width="50%" height="200px" alt="item9"/> 
     </p> 
     <h4> 
     999$ 
     </h4> 
    </div> 
    <div class="box2"> 
     <a href="#"> 
     <h4> 
      Next Page 
     </h4> 
     </a> 
    </div> 
    </center> 
</div> 

<div id="footer"> 
    test 
</div>

CSS：

#wrap{ 
    width:90%; 
    margin:0 auto; 
    margin-top: 5em; 
} 
.box{ 
    float:left; 
    width:30%; 
    height:300px; 
    margin:0 auto; 
} 
.box2{ 
    float:right; 
    width:30%; 
    margin:0 auto; 
} 
#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#ee5; 
    clear: both; 
}

來源

2014-11-01 mrahmat

你想如何渲染？ '#footer {position：fixed}'也許？ – Sampson 2014-11-01 23:55:05

所以你想要在頁面底部的黃色頁腳框？ – Kie21 2014-11-01 23:56:30

是的。他希望在頁面的底部。 @mrahmat，你的CSS很好，我在想你的HTML有語法錯誤？ – 2014-11-01 23:56:37

你並不需要使用position:absolute。正如@JimmyRare指出的，絕對定位是相對於窗口定位的。因此，只需刪除絕對位置，您的頁腳就會放回正常的文檔流程中。

JSFIDDLE PROOF HERE

來源

2014-11-02 00:19:25

-1

在CSS

#footer { 
width:100%; 
height:80px; 
position:absolute; 
top:250%; 
left:0; 
background:#ee5; 
clear: both; 

}

試試這個頁腳您可能需要調整％微升

來源

2014-11-02 00:02:46 Kie21

如果他在頁面中添加更多內容會怎麼樣？這不是一個好的解決方案。。。 – 2014-11-02 00:04:45

然後，％可以改變，以適應他的視線需求 – Kie21 2014-11-02 00:05:58

只要把它作爲一個塊級元素將會更有效。在正常的文檔流程中。 – 2014-11-02 00:08:47

您的頁腳是絕對的相對於窗口定位的，而不是你的包裝內。嘗試使窗口變大，您會看到頁腳將停留在底部。
這種類型的定位將在您滾動時不會重新定位，並且可能是您認爲它在包裝內呈現的原因。

也許這是更多你在找什麼？簡單地刪除絕對定位，並把它放在所有內容之後。

#footer { 
    width:100%; 
    height:80px; 
    background:#ee5; 
    clear: both; 
}

Fiddle

來源

2014-11-02 00:09:02 JimmyRare

是的我只是試了一下，發現包裝似乎是問題，你知道一種方法來解決包裝的定位，而不是搞砸了嗎？ – mrahmat 2014-11-02 00:19:15

您希望您的頁腳行爲如何？我編輯你的小提琴與我通常如何處理頁腳。 – JimmyRare 2014-11-02 00:21:58

html頁腳出現在包裝內？

回答

相關問題