如何将页眉和页脚拉伸到页面边缘？

问题描述 投票：0回答：3

我是HTML和CSS的新手，对这个论坛来说还是全新的。目前我正在工作 - 正如我所知 - 在我想要作为电子邮件发送的网页上。这是一个非常简单的格式，带有标题，子标题，正文和页脚。虽然我几乎完成了页面，但我仍然很少了解编码。我现在所困住的是将页眉和页脚（纯色）拉伸到页面的边缘（页眉和子标题的顶部，左侧和右侧以及页脚的左侧，右侧和底部）。

我自然做了很多研究，查看了帮助论坛并尝试了那里发现的技巧，即。重置css，设置保证金等。显然我没有成功，所以我在这里。

以下是通过Google Chrome的开发者工具enter image description here在iPhone 5上显示网页内容的快照

HTML标头

<head>
     <div class="header-background" style="margin-top:0;">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Vorstellung – Ether</title>
        //content
     </div>
</head>

CSS标题

.header-background {
  background: #899799;
  border: 0px solid #467813;
  border-radius: 0px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 10px 0px 10px 20px;
  left:0;
  right:0;
  margin:0;
  top:0;
}

.sub-header {
  background: #23313B;
  border: 0px solid #467813;
  border-radius: 0px;
  color: #969696;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 10px 0px 10px 20px;
}

HTML页脚

<footer class="email-footer">
    <div id="footer-content">
      <div id="wrapper">
         <p>
           <address>
                <div style="margin-left:20px">
                <span style="color: #DDD">Name<br> 
                Street<br>
                State<br>
                Country
                <br />
                <br />
                Copyright</span><br />
                </div>
          </address>
        </p>
      </div>
    </div>
</footer>

CSS页脚

.email-footer {

}

#footer-content {
    text-decoration: none;
    font-family: "Arial", "Helvetica", "sans-serif";
    color: #ccc;
    width: 100%;
    background: #6e6e6e;
    padding: 50px 0px;

}

任何有关改进代码的帮助和提示都将非常感谢！

谢谢，Ashish

附：我正在使用Dreamweaver CS5。

html css header footer
3个回答
0
投票

你的问题是身体的某些样式是自动设置的。

因此，如果您不想使用默认值，则必须覆盖它们。

在你的情况下，body的margin样式设置为8.如果你不想在代码中使用margin，你必须用0覆盖它：

*{
    margin: 0;
}

星形元素将覆盖html中的所有元素，并将边距设置为0.确保它在所有内容之前，因为如果在css中稍后某处更改边距，则不希望用0覆盖它。

0
投票

您是否尝试过在CSS中使用宽度和高度

例如：

height: 100%;
width: 100%;
-1
投票

欢迎。当您使用此HTML时，了解各种电子邮件模板可从Mailchimp和CampaignMonitor等网站获得，这可能会对您有所帮助。这些模板很有用，因为这些组织已经为您完成了大量艰苦的工作，确保模板在不同的电子邮件客户端中运行。

也就是说，如果将主体的CSS设置为零边距和填充，则每个内容区域的宽度可以为100％，以占据页面的整个宽度。

更进一步，这些内容区域可以封装在主容器中，主容器本身的宽度为100％。这样，您可以稍后通过更改该属性值来减小电子邮件的宽度。然后内容区域继承该宽度。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.