我正在网站/应用程序着陆页的html / css中工作,但我不想进行太多更改。使用Jinja2渲染模板,并且主页从page_template.html扩展。有许多扩展了page_template.html的页面模板,所以我想尽可能少地摆弄它。无论浏览器/屏幕分辨率如何,设计人员都希望主页上的div(或两个)的背景色延伸到浏览器的整个宽度上。页面模板具有一个page-container id,该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>


而且似乎可行。对于此Web应用程序,它已经足够好(我认为)。但是,这会破坏页面的响应能力,因为在缩小浏览器时,具有此类.overflow的div不会重新调整大小。他们是这样做的更好方法吗?他们是在不影响响应能力的情况下做到这一点的方法吗?

最佳答案

这可以通过: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%; }


您可能还需要考虑将overflow-x:隐藏到您的身体和html元素中,以防止出现水平滚动条:

body, html { overflow-x: hidden; }


浏览器对此基本上是IE8 +的支持,因此您可以期望它几乎可以在所有浏览器上使用。

关于html - 使用CSS边距和填充溢出页面容器的背景色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16548185/

10-11 13:09
查看更多