逃离div容器的边界

Question

好吧,我明白DIV的目的是遏制其内在元素 - 我不想通过另外说话来打扰任何人.但是,请考虑以下情形:

我的网页(仅占整个页面宽度的70%)被一个容器(div)包围.但是,在我页面顶部的导航栏下,我想创建一个占用整个页面宽度100%的横幅(这意味着它必须扩展到其容器的边界之外作为容器只占页面宽度的70%.

这是我想要完成的基本想法:http://www.petersonassociates.biz/

有没有人对我如何做到这一点有任何建议？我很感激任何帮助.

埃文

Answer 1

如果您只是希望元素的背景在整个页面上延伸,那么也可以使用负边距来实现.

简而言之(评论更正):

.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}

这为您提供了水平滚动条,您可以删除它:

body {overflow-x: hidden; }

http://www.sitepoint.com/css-extend-full-width-bars/上有一个指南.使用伪元素执行此操作可能更具语义性:http://css-tricks.com/full-browser-width-bars/

Answer 2

编辑（2019 年）： 有一个新技巧可以使用此 CSS 实用程序进行完全流血：

width: 100vw;
margin-left: 50%;
transform: translateX(-50%);

我想所有的解决方案都已经过时了。

逃避元素边界的最简单方法是添加：

    margin-left: calc(~"-50vw + 50%");
    margin-right: calc(~"-50vw + 50%");

可以在此处和此处找到讨论。对于即将到来的grid-layouts也有一个很好的解决方案。

Answer 3

如果我理解正确,

style="width: 100%; position:absolute;"

应该实现你的目标.