Html 转义 div 容器的边界
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7762307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Escape the bounds of a div container
提问by Mark
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:
好的，我知道 DIV 的目的是包含其内部元素 - 我不想通过其他方式来打扰任何人。但是，请考虑以下情况：
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).
我的网页（只占整个页面的 70% 的宽度）被一个容器（一个 div）包围着。但是，在页面顶部的导航栏下，我想创建 w 横幅，该横幅占整个页面宽度的 100%（这意味着它必须扩展到其容器的边界之外作为容器仅占页面宽度的 70%）。
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
这是我试图完成的基本想法：http: //www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
有没有人对我如何做到这一点有任何建议？我很感激任何帮助。
Evan
埃文
采纳答案by Dennis
If I understood correctly,
如果我理解正确的话
style="width: 100%; position:absolute;"
should achieve what you're going for.
应该实现你想要的。
回答by Mark
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):
简而言之（从评论中更正）：
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
这为您提供了可以删除的水平滚动条：
body {overflow-x: hidden; }
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/
http://www.sitepoint.com/css-extend-full-width-bars/ 上有一个指南。使用伪元素执行此操作可能更具语义：http: //css-tricks.com/full-browser-width-bars/
回答by David Savage
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
这样做在语义上更正确的方法是将标题放在主容器之外，避免position:absolute.
Example:
例子：
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
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.
另一种方法（将其保留在 中<section class="main-content">）正如您所说，不正确，因为 div（或部分）应该包含元素，而不是让它们超出其父 div/section 的范围。如果您的子 div 扩展到父 div 之外，您也会在 IE 中遇到问题（我相信任何 7 或更低版本，但这可能只是 IE6 或更低版本）。
回答by rhodesjason
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.
绝对定位
就像其他人所建议的那样，如果您为要跨页面拉伸的元素提供 100% 宽度和绝对位置的 CSS 属性，它将跨越页面的整个宽度。
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.
但是，它也将位于页面顶部，可能会遮挡您的其他内容，这不会为您现在 100% 的内容腾出空间。绝对定位会从文档流中删除元素，因此它将表现为您新定位的内容不存在。除非您准备好准确计算新元素的位置并为其腾出空间，否则这可能不是最好的方法。
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.
嵌套 DIV
这就是我建议您这样做的方式。在我们担心任何 100% 宽度的东西之前，我将首先向您展示如何设置 70% 居中的外观。
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
用这样的 CSS：
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appearsto 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.
现在，您似乎拥有一个围绕着居中内容的容器，而实际上，向下移动页面的每一行内容都由一个包含 div 组成，具有语义和描述性类（如 header、mainContent 等），以及它里面的一个“中心”类。
With that set up, making the header appear to "break out of the container div" is as easy as:
有了这个设置，让标题看起来“脱离容器 div”就像这样简单：
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itselfto stretch across the page, you could do:
颜色到达页面的边缘。如果出于某种原因您希望内容本身在整个页面上延伸，您可以这样做：
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
并且该样式将覆盖 .center 样式，并使页眉的内容扩展到页面的边缘。
Good luck!
祝你好运！
回答by Stevie-Ray Hartog
EDIT (2019):There is a new trickto get a full bleed using this CSS utility:
编辑（2019 年）：有一个新技巧可以使用此 CSS 实用程序进行完全流血：
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
我想所有的解决方案都已经过时了。
The easiest way to escape the bounds of an element is by adding:
逃避元素边界的最简单方法是添加：
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found hereand here. There is also a nice solution for the upcoming grid-layouts.
可以在此处和此处找到讨论。对于即将到来的grid-layouts也有一个很好的解决方案。
