逃离 div 容器的边界
好吧，我知道 DIV 的目的是包含其内部元素 - 我不想因为其他说法而让任何人感到不安。但是，请考虑以下场景：
我的网页（仅占整个页面的 70% 宽度）被容器（div）包围。但是，在页面顶部的导航栏下，我想创建占据整个页面宽度 100% 的 w 横幅（这意味着它必须延伸到其容器的边界之外，因为容器仅占据页面宽度的 70%）。
这是我试图实现的基本想法：http://www.petersonassociates.biz/
有人吗对我如何实现这一目标有什么建议吗？我将不胜感激任何帮助。
埃文
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
如果您只想让元素的背景延伸到整个页面，也可以通过负边距来实现。
简而言之（评论更正）：
这为您提供了水平滚动条，您可以使用以下方法删除它：
http://www.sitepoint.com/css-extend-full-width-bars/。
使用伪元素执行此操作可能更具语义： http://css-tricks.com/full-browser -宽度条/
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
That gives you horizontal scroll bars which you remove with:
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
编辑（2019）：
有一个新技巧来获得全出血使用这个CSS实用程序：
我想所有的解决方案都有点过时了。
逃脱元素边界的最简单方法是添加：
可以找到讨论 这里和这里。对于即将推出的 grid-layouts 也有一个很好的解决方案。
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
如果我理解正确的话，
应该可以实现你想要的。
If I understood correctly,
should achieve what you're going for.
有几种方法可以做到这一点。
绝对定位
就像其他人建议的那样，如果你给你想要在页面上拉伸的元素 100% 宽度和绝对位置的 CSS 属性，它将跨越页面的整个宽度。
但是，它也将位于页面顶部，可能会遮挡您的其他内容，从而无法为您现在的 100% 内容腾出空间。绝对定位会从文档流中删除该元素，因此它会表现得好像新定位的内容不存在一样。除非您准备好准确计算新元素的位置并为其腾出空间，否则这可能不是最好的方法。
图像：您还可以使用图像集合来获得您想要的内容，但祝您更新它或更改页面任何部分的高度等好运。同样，这不利于可维护性。
嵌套 DIV
这就是我建议你这样做的方式。在我们担心任何 100% 宽度的问题之前，我将首先向您展示如何设置 70% 居中的外观。
使用这样的 CSS：
现在您拥有了一个围绕中心内容的容器，而实际上，沿着页面向下移动的每一行内容都由一个包含 div 组成，具有语义和描述性类（如 header、mainContent 等），其中有一个“中心”类。
完成此设置后，使标题看起来“脱离容器 div”就很简单：
并且颜色到达页面的边缘。如果出于某种原因您希望内容本身延伸到整个页面，您可以这样做：
并且该样式将覆盖 .center 样式，并使标题的内容延伸到页面的边缘。
祝你好运！
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
With CSS like this:
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
语义上更正确的方法是将标头放在主容器之外，避免使用
position:absolute。示例：
另一种方法（将其保留在
中）正如您所说，不正确，因为 div（或部分）应该包含元素，而不是让它们超出其父 div/节的范围。如果您的子 div 延伸到父 div 之外，您还会在 IE 中遇到问题（我相信任何 7 或更低版本，这可能只是 IE6 或更低版本）。The more semantically correct way of doing this is to put your header outside of your main container, avoiding the
position:absolute.Example:
The other method (keeping it in
<section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.您可以使用 css 的
white-space:normal属性。You can use
white-space:normalpropoerty of css.