如何將填充添加到包含浮動img的網站底部？

我正在構建一個網頁，其中有一個'img'浮動在div中作爲頁面上顯示的最低元素。該頁面突然在圖像底部結束。爲了美觀，我希望用戶能夠滾動到圖像之外（20px左右）。我試圖將margin-bottom和padding-bottom應用於body，一個包含div，以及有問題的圖片，但無濟於事。如何將填充添加到包含浮動img的網站底部？

我沒有，也不會嘗試使用html來添加緩衝區或任何其他hackish解決方案。

頁：http://www.roughgiraffed.com/about.php （請不要評判我們笑，還是很粗糙的（雙關語意），遠離部署）

預先感謝您的幫助！

來源

2010-08-10 Zach Lysobey

什麼，你已經嘗試已經應該已經實現您的有希望的結果提供的信息。工作中必須有其他風格才能避免這種情況發生。 – Aaron 2010-08-10 23:38:02

你能發佈一個鏈接到這個網站嗎？還是一個例子？或者pastebin.org？ – villecoder 2010-08-10 23:40:07

這張圖片是否浮動？過去我遇到過浮動塊元素有似乎被忽略的邊距問題。 – PeterL 2010-08-10 23:42:04

試穿#container添加overflow: hidden;。浮動文件將.profile div從文檔流中取出，這使得瀏覽器認爲#container僅與一般文本一樣高。以某種方式設置溢出重置此。當您添加它時，您可以像平常一樣在容器上設置邊距。

來源

2010-08-10 23:55:03

太棒了！這個技巧就像一個魅力。不知道它爲什麼會起作用，但這正是我所需要的。 – 2010-08-10 23:59:23

我也沒有。經過多年無用的樣品後，我偶然發現它。我永遠不會忘記它，並儘可能地分享它來拯救其他人。 – 2010-08-11 00:04:43

我做了以下測試，並使身體溢出並顯示垂直滾動條。 Try it.

<html> 
<body> 
    <div id="container"> 
     <div id="imageContainer" style="padding-bottom:1000px;"> 
     <img src="youImage.jpg"/> 
     </div> 
    </div> 
</body>

此外，下面的是一個稍微不同的方法：

<html style="height: 110%;"> 
<body> 
    <div id="container"> 
     <div id="imageContainer"> 
     <img src="youImage.jpg"/> 
     </div> 
    </div> 
</body>

來源

2010-08-10 23:41:54 Strelok

謝謝你的努力，但第一種方法是類似於我一直在嘗試（它在我的情況下失敗），第二種方法並不適用於我的情況。 – 2010-08-10 23:51:07

也許你的風格與顯示元素：內聯？

內聯元件不能有填充或利潤率

來源

2010-08-10 23:46:29

您應該可以將margin-bottom添加到您的身體標記。

body { margin-bottom: 20px; }

否則你的廣告是下邊距，您的容器

<div id="container"> 
    <img src="yourimage.jpg" alt="" /> 
</div> 

#container { margin-bottom: 20px; }

注：兩種方法進行測試時，工作

來源

2010-08-11 14:13:27 talkingD0G

是這是我試圖做的;問題與浮動圖像有關，因爲我認爲這是頁面上最低的元素。我正在更新原始問題以反映這一點。 – 2010-08-11 17:10:59

如何將填充添加到包含浮動img的網站底部？

回答

相關問題