我正在网站/应用程序着陆页的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/