<div> 底部带有响应式背景图像的额外空间答案

【问题标题】：Extra space on bottom of <div> with responsive background image<div> 底部带有响应式背景图像的额外空间
【发布时间】：2015-09-27 09:32:57
【问题描述】：

我为我的网站设计了一个新的电子邮件布局。它由三部分组成，页眉、正文和页脚。所以3个div。标题背景是用 img 标签完成的，因为它上面不会有任何东西。正文是一条重复的细线，您看到的页脚将有背景和 4 个用于社交网络的 img 按钮。所以它必须是背景图像而不是img，但它必须有一个高度原因，因为我搜索了很多！您无法通过背景图像控制 div 高度。但问题是高度是固定的，背景图像会调整大小但 div 不会，所以我在 div 的额外部分获得背景颜色。这是文件。任何帮助将不胜感激。或者即使你有一个更简单的解决方案，也会更加感激。我知道编码很脏我没有太多经验。请记住，它是针对电子邮件的，因此没有邮件客户端无法处理的难题。 :D

更新：好吧，我决定使用底部填充，它几乎解决了我的问题谢谢。

【问题讨论】：

你到底想达到什么目标？
当页脚缩小时，我想删除页脚底部的多余空间。
知道了，让我为你制作一个小提琴
你想删除我在这里标记的灰色空间吗？ awesomescreenshot.com/image/392400/…
什么意思？只要它不改变整体外观我不介意。

标签： html css

【解决方案1】：

这是工作代码：

<html>
    <head>
        <title>MissLand</title>
        <style type="text/css">
            html, body{
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
                text-align: center;
            }

            #Container{
                text-align: center;
                height: 100vh;
                width: 100vh;
                position: relative;
                display: inline-block;
            }

            #Header{
                background: url("./h.jpg");
                min-height: 208px;
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: 2;
            }

            #Body{
                background: url("./b.jpg");
                max-width: 600px;
                min-height: 50px;
                width: 100%;
                float: left;
                clear: both;
                position: absolute;
                left: 0px;
                top: 0px;
                bottom: 0px;
                z-index: 0;
            }

            #Footer{
                background: url("./f.jpg");
                min-height: 380px;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 1;
            }

            #Header, #Footer{
                background-repeat: no-repeat;
                background-size: contain;
                background-clip: border-box; 
                width: 100%;
                float: left;
                clear: both;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="Container">
            <div id="Header"></div>
            <div id="Body"></div>
            <div id="Footer"></div>
        </div>
    </body>
</html>

【讨论】：

太棒了！感谢老兄的时间和精力。
btw 我可以问一个问题吗？你会删除媒体火力链接吗？只是为了隐私问题。代码不是问题，应该在这里看到其他运行相同问题的人，而不是图片和东西。

【解决方案2】：

我认为您需要将页脚始终放在底部位置，因为又没有内容了，所以这就是它在底部留出额外空间的原因，

在您的页脚添加此样式：

  position: absolute;
  bottom: 0;
  width: 100%;

【讨论】：

感谢您的快速响应，但这对我需要的方式没有帮助。确保它消除了灰色空间，但它迫使我拥有一个我不想拥有的至少高度的身体。看到身体高度随内容而变化，顺便说一句，-1 不是我的：D