Question

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

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

Answer 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>

Answer 2

我认为你需要将页脚始终放在最低位置，因为没有内容，所以这就是为什么它会在底部留出额外的空间，

在页脚上添加此样式：

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

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

2 个答案: