Question

我正在构建一个网页，其中有一个'img'浮动在div中作为页面上显示的最低元素。页面突然在图像的底部结束。为了获得美观，我希望用户能够滚动到图像之外（20px左右）。我试图将margin-bottom和padding-bottom应用于正文，包含div和所讨论的图像，但无济于事。

我没有，也不会尝试使用html添加缓冲区或任何其他hackish解决方案。

页面：http://www.roughgiraffed.com/about.php （请不要判断我们大声笑，仍然非常粗糙（双关语）并远离部署）

提前感谢您的帮助！

Answer 1

尝试在overflow: hidden;上添加#container。浮点数将.profile div从文档流中取出，这使浏览器认为#container仅与常规文本一样高。设置溢出会以某种方式重置此操作。当您添加它时，您可以像往常一样在容器上设置边距。

Answer 2

我做了以下测试，这使得身体溢出并显示垂直滚动条。 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>

Answer 3

也许您使用display：inline？

设置了元素

内联元素不能有填充或边距

Answer 4

您应该可以在body标签上添加margin-bottom。

body { margin-bottom: 20px; }

否则，您可以在容器的底部加上

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

#container { margin-bottom: 20px; }

注意：两种方法在测试时都有效

如何在包含浮动img的网站底部添加填充？

4 个答案: