Html 底部的额外空间<；部门>；具有响应性的背景图像
我为我的网站设计了一个新的电子邮件布局。它由页眉、正文和页脚三部分组成。所以有3个div。标题背景是用img标记完成的，因为上面不会有任何内容。身体是一条重复的细线，你看到的页脚将有背景和4个用于社交网络的img按钮。所以它必须是背景图像而不是img，但它必须有高度原因，因为我搜索了很多！无法通过背景图像控制div高度。但问题是，由于高度是固定的，背景图像将调整大小，但div不会，因此我在div的额外部分上获得背景颜色。这是文件。任何帮助都将不胜感激。或者，即使你得到了一个更容易的解决方案，也会得到更多的赞赏。我知道编码是肮脏的，我没有太多的经验。请记住，这是一封电子邮件，所以邮件客户端不会处理任何硬东西DHtml 底部的额外空间<；部门>；具有响应性的背景图像,html,css,Html,Css,我为我的网站设计了一个新的电子邮件布局。它由页眉、正文和页脚三部分组成。所以有3个div。标题背景是用img标记完成的，因为上面不会有任何内容。身体是一条重复的细线，你看到的页脚将有背景和4个用于社交网络的img按钮。所以它必须是背景图像而不是img，但它必须有高度原因，因为我搜索了很多！无法通过背景图像控制div高度。但问题是，由于高度是固定的，背景图像将调整大小，但div不会，因此我在div的额外部分上获得背景颜色。这是文件。任何帮助都将不胜感激。或者，即使你得到了一个更容易的解决方案，也会
更新：我决定使用底部填充，这几乎解决了我的问题。谢谢。我认为你需要将页脚始终放在底部位置，因为再次没有内容，所以这就是为什么它在底部留出额外空间的原因 在页脚上添加此样式：
position: absolute;
bottom: 0;
width: 100%;
这是工作代码：
<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>
米斯兰
html，正文{
填充：0；
保证金：0；
宽度：100%；
身高：100%；
文本对齐：居中；
}
#容器{
文本对齐：居中；
高度：100vh；
宽度：100vh；
位置：相对位置；
显示：内联块；
}
#标题{
背景：url（“./h.jpg”）；
最小高度：208px；
位置：绝对位置；
左：0px；
顶部：0px；
z指数：2；
}
#身体{
背景：url（“./b.jpg”）；
最大宽度：600px；
最小高度：50px；
宽度：100%；
浮动：左；
明确：两者皆有；
位置：绝对位置；
左：0px；
顶部：0px；
底部：0px；
z指数：0；
}
#页脚{
背景：url（“./f.jpg”）；
最小高度：380px；
位置：绝对位置；
底部：0；
左：0；
z指数：1；
}
#页眉，#页脚{
背景重复：无重复；
背景尺寸：包含；
背景剪辑：边框框；
宽度：100%；
浮动：左；
明确：两者皆有；
保证金：0；
}