有没有办法使用 CSS 使子 DIV 的宽度比父 DIV 宽？

Posted 2023-03-05

技术标签:

【中文标题】有没有办法使用 CSS 使子 DIV 的宽度比父 DIV 宽？【英文标题】：Is there a way to make a child DIV's width wider than the parent DIV using CSS? 【发布时间】：2011-07-31 15:54:41 【问题描述】：

有没有办法在比其父级更宽的父级容器 DIV 中拥有一个子级 DIV。子 DIV 需要与浏览器视口的宽度相同。

请看下面的例子：

子 DIV必须保持为父 div 的子级。我知道我可以在子 div 上设置任意负边距以使其更宽，但我不知道如何从本质上使其成为浏览器的 100% 宽度。

我知道我可以做到：

.child-div
    margin-left: -100px;
    margin-right: -100px;

但我需要孩子与动态浏览器的宽度相同。

更新

感谢您的回答，目前看来最接近的答案是将子 DIV 位置设为：绝对，并将左右属性设置为 0。

我遇到的下一个问题是父级有 position:relative，这意味着左右属性仍然是相对于父级 div 而不是浏览器，请参见此处的示例：jsfiddle.net/v2Tja/2

如果不搞砸其他一切，我无法从父级中删除相对位置。

【问题讨论】：

您的要求没有真正的意义。 “子 div”必须作为父 div 的子元素，而父 div 有 position: relative?你需要position: relative 做什么？我想我要问的是：你想做什么？ @Camsoft 你看到我对我的回答的评论了吗？这对我有用，还请查看我的网站edocuments.co.uk，它以不同的方式完成您尝试做的事情 @Camsoft 另外，您的解决方案中确实不需要任何 jquery / js 【参考方案1】：

这是一个将子元素保留在文档流中的通用解决方案：

.child 
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

我们将子元素的width 设置为填充整个视口宽度，然后通过将其移动到left 一半视口的距离（负50% 的距离）使其与屏幕边缘相遇父元素的宽度。

演示：

* 
  box-sizing: border-box;


body 
  margin: 0;
  overflow-x: hidden;


.parent 
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;


.child 
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;

<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

浏览器对vw 和calc() 的支持通常可以看作是IE9 和更新版本。

注意：假设盒子模型设置为border-box。如果没有border-box，您还必须减去填充和边框，使这个解决方案变得一团糟。

注意：建议隐藏滚动容器的水平溢出，因为某些浏览器可能会选择显示水平滚动条，尽管没有溢出。

【讨论】：

你知道吗，它在 IE9 中确实有效。 +1 不错这正是我想要的，非常感谢你。 IMO 这是一个比接受的答案更好的答案，因为这个答案不会破坏文档流大众不好。如果你有一个垂直滚动条，那么 100vw 会给你一个水平滚动条。似乎这只适用于下一级。不管子元素有多少父元素，有没有办法让它工作？这是将更宽的子元素包装成 position: relative 父元素的正确答案！【参考方案2】：

使用绝对定位

.child-div 
    position:absolute;
    left:0;
    right:0;

【讨论】：

好的，下一个问题，如果父级或另一个祖先有布局，即位置：相对，请参阅：jsfiddle.net/v2Tja/2 另一个父 div 是 position:static，而另一个 div 里面的 position:relative 怎么样？ jsfiddle.net/blowsie/v2Tja/3 有没有办法做到这一点，让 .child-div 的高度自动并在下面仍然有正确的位置？并且不要将父 div 设置为 "overflow:hidden" ^^ @Blowsie position:fixed 怎么样。为什么它不能正常工作？【参考方案3】：

长期以来，我一直在四处寻找解决此问题的方法。理想情况下，我们希望孩子大于父母，但事先不知道父母的约束。

我终于找到了一个出色的通用答案here。逐字复制：

这里的想法是：将容器推到容器的正中间左侧的浏览器窗口：50%;，然后将其拉回左边缘负 -50vw 边距。

.child-div 
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

【讨论】：

我发现如果我希望它是视口宽度的 90%，我可以使用上面的方法，但将宽度设置为 90vw。此外，margin-right 似乎在任何情况下都不起作用。必须更改左右边距值，因为我的包装器是视口宽度的 80%。所以在我的情况下，它必须是 margin-left:-10vw 和 margin-right:-10vw 然后它完美地工作！谢谢！这是一个绝妙的答案！谢谢。这是一个非常聪明的答案，效果很好！【参考方案4】：

根据您的建议原始建议（设置负边距），我尝试了一种类似的方法，使用百分比单位作为动态浏览器宽度：

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
        </div>
    </div>
</div>

CSS：

.child-div
   margin: 0 -100%;
   padding: 0 -100%;


.parent 
    width: 60%;
    background-color: red;
    margin: 0 auto;
    padding: 50px;
    position:relative;


.grandparent 
        overflow-x:hidden;
        background-color: blue;
        width: 100%;
        position:relative;

负边距会让内容流出Parent DIV。因此我设置了padding: 0 100%; 将内容推回到Chlid DIV 的原始边界。

负边距也会使 .child-div 的总宽度扩大到浏览器的视口之外，从而导致水平滚动。因此，我们需要通过将overflow-x: hidden 应用到祖父 DIV（它是父 Div 的父级）来剪裁挤出宽度：

这里是JSfiddle

我试过 Nils Kaspersson 的 left: calc(-50vw + 50%)；在我发现 Safari 浏览器不能正常运行之前，它在 Chrome 和 FF 中运行得非常好（还不确定 IE）。希望他们尽快解决这个问题，因为我真的喜欢这种简单的方法。

这也可以解决您的父 DIV 元素必须为 position:relative 的问题

这种变通方法的两个缺点是：

需要额外的标记（即祖父元素（就像好的 ol' 表格垂直对齐方法不是...） Child DIV 的左右边框永远不会显示，因为它们位于浏览器的视口之外。

如果您发现此方法有任何问题，请告诉我 ;)。希望对您有所帮助。

【讨论】：

【参考方案5】：

Flexbox 可用于通过三行 CSS 使子级比其父级宽。

只需要设置孩子的display、margin-left和width。 margin-left 取决于孩子的 width。公式为：

margin-left: calc(-.5 * var(--child-width) + 50%);

CSS 变量可用于避免手动计算左边距。

演示 #1：手动计算

.parent 
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;


.child 
  background-color: pink;
  display: flex;


.wide 
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;


.full 
  margin-left: calc(-50vw + 50%);
  width: 100vw;

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

演示 #2：使用 CSS 变量

.parent 
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;


.child 
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);


.wide 
  --child-width: 75vw;


.full 
  --child-width: 100vw;

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

【讨论】：

【参考方案6】：

我用过这个：

html

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

CSS

.container 
  overflow-x: hidden;


.child 
  position: relative;
  width: 200%;
  left: -50%;


.inner-container
  max-width: 1179px;
  margin:0 auto;

【讨论】：

【参考方案7】：

我遇到了类似的问题。子元素的内容应该保留在父元素中，而背景必须扩展整个视口宽度。

我通过创建子元素 position: relative 并使用 position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px; 添加伪元素 (:before) 解决了这个问题。伪元素作为伪背景元素留在实际子元素后面。这适用于所有浏览器（甚至 IE8+ 和 Safari 6+ - 无法测试旧版本）。

小例子小提琴：http://jsfiddle.net/vccv39j9/

【讨论】：

这似乎可行，但由于宽度为 4000 像素，它会导致浏览器显示水平滚动条。将伪元素保持在视口宽度内的解决方法是什么？当然要设置body或者page wrapping div为overflow-x: hidden。【参考方案8】：

你可以试试 position: absolute。并给出 width 和 height , top: 'y axis from the top' 和左：'x轴'

【讨论】：

【参考方案9】：

我知道这是旧的，但对于任何来此寻求答案的人，你会这样做：

溢出隐藏在包含父元素的元素上，例如body。

给你的子元素一个比你的页面宽得多的宽度，并将其绝对左侧放置 -100%。

这是一个例子：

body 
  overflow:hidden;


.parent
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    


.child 
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;

还有一个 JS Fiddle：http://jsfiddle.net/v2Tja/288/

【讨论】：

【参考方案10】：

除了 Nils Kaspersson 的解决方案之外，我还解决了垂直滚动条的宽度问题。我以16px 为例，它是从视口宽度中减去的。这将避免出现水平滚动条。

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

【讨论】：

我相信你需要减去的16px，因为它导致水平滚动条是浏览器的默认边距/填充，而不是减去它只是使用这个html, body margin:0; padding:0 ，这样你就赢了'不需要对16px进行额外计算这是页面内容较长且低于首屏且自动出现滚动条的情况。当然，当内容在折叠内时，这不是必需的。只有当我知道页面内容会很长并且滚动条确实会出现时，我才会将 16px 添加到公式中。我认为它不适用于移动设备。手机没有滚动条。【参考方案11】：

假设父级具有固定宽度，例如 #page width: 1000px; 并且居中 #page margin: auto; ，您希望子级适应浏览器视口的宽度，您只需这样做：

#page 
    margin: auto;
    width: 1000px;


.fullwidth 
    margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
    width: 100vw;

【讨论】：

【参考方案12】：

要使子 div 与内容一样宽，试试这个：

.child
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;

【讨论】：

【参考方案13】：

我尝试了您的一些解决方案。这个：

margin: 0px -100%;
padding: 0 100%;

是迄今为止最好的，因为我们不需要额外的 css 来实现更小的屏幕。我制作了一个 codePen 来显示结果：我使用了一个带有背景图像的父 div，以及一个带有内部内容的子 divon div。

https://codepen.io/yuyazz/pen/BaoqBBq

【讨论】：

【参考方案14】：

.parent 
    margin:0 auto;
    width:700px;
    border:2px solid red;

.child 
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;

【讨论】：

聪明，但似乎不起作用（至少在 li 中嵌入了 span）。【参考方案15】：

那么解决方法如下。

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent
        width: 960px;
        margin: auto;
        height: 100vh
    
    .child
        position: absolute;
        width: 100vw

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。

以上是关于有没有办法使用 CSS 使子 DIV 的宽度比父 DIV 宽？的主要内容，如果未能解决你的问题，请参考以下文章

跨浏览器方法使子 div 适合其父级的宽度

当父元素和子元素都具有不同的百分比宽度时如何使子 div 居中

如何使子高度相对于其父高度-Css

如何使用 Javascript 或 CSS 在 DIV 上应用媒体查询 [重复]

使子 DIV 可滚动

使用css缩小div中的文本字体大小