0

我正在处理网站/应用程序的登录页面的 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 来说已经足够好了（我认为）。然而，它破坏了页面的响应能力，因为当浏览器变小时，具有此类的 div.overflow不会调整大小。他们是更好的方法吗？他们是一种在不影响响应能力的情况下做到这一点的方法吗？

4

1 回答 1

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%; }

您可能还需要考虑在 body 和 html 元素中添加 overflow-x: hidden 以防止水平滚动条：

body, html { overflow-x: hidden; }

浏览器对此的支持本质上是 IE8+，因此您可以期望它几乎可以在所有浏览器上运行。

于 2013-05-14T17:04:54.553 回答