Question

我正在处理网站/应用程序着陆页的html / css，我不想做太多更改。使用Jinja2呈现模板，主页从page_template.html扩展。有很多页面模板可以扩展page_template.html，所以我想尽可能少地使用它。无论浏览器/屏幕分辨率如何，设计人员都希望主页上的div（或两个）的背景颜色延伸到浏览器的整个宽度。页面模板有一个page-container id包围整个内容，就像这样。

#page-container {
  background-position: 0 85px;
  max-width: 1200px;
  position: relative;
  margin: 0 auto;
}

如果我想扩展div以超出1200px的宽度，我决定尝试这样的事情：

.overflow {
  background-color: #fff;
  margin-right: -200px;
  margin-left: -200px;
  padding-right: 200px;
  padding-left: 200px;
}

做这样的事情：

<div id="page-container">
  <div class="overflow">
   Content
  </div>
</div>

它似乎有效。它适用于这个webapp（我认为）。但是它打破了页面的响应性，因为当浏览器变小时，具有此.overflow类的div不会调整大小。他们是更好的方法吗？他们是一种在不影响响应能力的情况下做到这一点的方法吗？

Answer 1

这可以通过：before和：after伪元素来完成。

假设您在问题中使用了标记，这个CSS应该可以解决问题：

.overflow { position: relative; }

.overflow:before,
.overflow:after {
    display: block;
    content: " ";
    position: absolute;
    width: 9999px;
    top: 0;
    bottom: 0;
    background: #c0ffee;
}

.overflow:before { left: 100%; }
.overflow:after { right: 100%; }

你可能还想考虑在你的身体和html元素中添加overflow-x：hidden以防止水平滚动条：

body, html { overflow-x: hidden; }

浏览器对此的支持本质上是IE8 +，因此您可以期望它可以在大多数浏览器上运行。

使用CSS边距和填充溢出页面容器的背景颜色

1 个答案: