使子元素div跨越整个页面宽度

Question

假设我有以下HTML代码：

<div id="container" style="width: 960px">
   <div id="help_panel" style="width: 100%; margin: 0 auto;">
     Content goes here.
   </div> 
</div>

如果我想让help_panel div跨越整个页面/浏览器的宽度，即使页面/浏览器的宽度比container div设置的960像素宽还要宽，是否可以使用上述结构实现？如果页面超过960像素宽，我希望help panel div可以扩展到超出container div的宽度限制。我想知道这是否可以通过上述结构实现，还是必须将help_panel div放在container div之外才能实现？

谢谢！

- Bug Magnet

Answer 1

可以做到。您需要使用

position:absolute;
left:0;
right:0;

请查看http://jsfiddle.net/bJbgJ/3/获取可运行的示例代码。

- Hussein

---

这种方法可行，但没有考虑到全宽元素之后的任何内容（请参见@esel的回答）。有没有可能做到这样，同时还能影响其余的内容呢？ - Lucy Bain

如果你要设置的子元素有一个父元素设置为position:relative，而这个父元素不是整个页面的宽度，那么这种方法就行不通了。 - contactmatt

为什么这在文本区域上不起作用？textarea（display:block）和div有什么区别？它们的表现方式不同。 - Srneczek

@LucyBain - 我也遇到了同样的问题。你可以在页面加载时使用jQuery为容器添加底部边距，这样就可以显示所有子div内容。var cntmarg = $( "#help-panel" ).height(); $("#container").css('margin-bottom', cntmarg); - buzibuzi

Answer 2

在当前的浏览器中（这个问题现在有点过时了），您可以使用简单得多的vw（视口宽度）单位：

#help_panel {
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

（使用数据：http://caniuse.com/#feat=viewport-units）

从我的测试来看，这应该不会破坏您的布局，同时很容易使用。

- Stephane Rodet

---

这很不错。甚至更好，不使用 calc: https://coderwall.com/p/hkgamw/creating-full-width-100-container-inside-fixed-width-container - dariodev

我喜欢它！也许最好加上，只有当包含父级在页面中心时才有效（这让我困惑了一段时间）。基本上，margin-left: 50% 将左边距居中于父容器（如果父容器居中，则为页面中心），然后 -50vw 将其向左移动半个页面。 - Claude

Answer 3

你可以使用 100vw（视口宽度）。100vw 表示视口的 100%。vw 被 所有主流浏览器支持，包括 IE9+。

<div id="container" style="width: 960px">
   <div id="help_panel" style="width: 100vw; margin: 0 auto;">
     Content goes here.
   </div> 
</div>

- Aminah Nuraini

Answer 4

可以的，为容器设置 position: relative，为 help_panel 设置 position: absolute

- Kent

---

不太对，容器需要具有“position:static”的默认属性。如果将其设置为“relative”，即使设置了“position:absolute”，嵌套的div也会拉伸到父宽度。 - user578895

Answer 5

你可以使用position:absolute将其从流中移出。但是helper_panel会与其他内容重叠。(我添加了顺序，以查看div)

<div id="container" style="width: 960px; border:1px solid #f00;">
    Text before<br>
   <div id="help_panel" style="width: 100%; position:absolute; margin: 0 auto; border:1px solid #0f0;">
     Content goes here.
   </div> 
   This is behind the help_penal
</div>

- sauerburger

Answer 6

试试这个：它会使用整个屏幕宽度：

min-width: 100vw;

- Daniel Bellmas

Answer 7

只需将宽度设置为100vw，如下所示：

<div id="container" style="width: 100vw">
 <div id="help_panel" style="width: 100%; margin: 0 auto;">
  Content goes here.
 </div> 
</div>

- Josiah Nunemaker

---

它将内容向右推出，但对于我来说不会重叠到父元素的左侧。 - Savage

Answer 8

你可以通过在元素上设置position:absolute来将其从流中拖出，但是你将需要处理不同的显示问题。或者你可以明确地将宽度设置为> 960。

- user578895

Answer 9

你可以使用jQuery来做到这一点...

$("#help_panel").width($(window).width());

否则，就CSS而言，我相当确定您必须使用position:absolute样式将help_panel div放在container的外部：http://css-tricks.com/forums/discussion/2318/give-child-div-width%3A100-of-page-width-inside-parent./p1

- Damien-Wright

Answer 10

由于在我的特殊情况下，position: absolute;和视口宽度不是选项，因此有另一种快速解决问题的方法。唯一的条件是，x方向上的溢出对您的网站不是必要的。

您可以为元素定义负边距：

#help_panel {
    margin-left: -9999px;
    margin-right: -9999px;
}

但是由于这样做会导致溢出，因此我们必须全局避免x方向的溢出，例如对于body：

body {
    overflow-x: hidden;
}

您可以设置padding来选择内容的大小。

请注意，此解决方案并不能为内容带来100%的宽度，但在需要背景颜色具有完整宽度且内容仍取决于容器的情况下非常有用。

- sagacity

---

它或许对于颜色本身有效，但如果我在其中放置内容，它会被推到屏幕左侧。 - Savage