如果容器 div 较小，如何将子 div 扩展到 100% 屏幕宽度? [英] How can I expand a child div to 100% screen width if the container div is smaller?

问题描述

整个页面的父元素是一个居中的 div，最大宽度为 960px.页面上的所有其他元素都是该父 div 的子元素.简化后的结构如下:

<div id=某物"></div><div id="wide-div"></div><div id=别的东西"></div>

虽然父 div 不应扩展到超过 960 像素的宽度，但我称之为宽 div"的 div 不应该超出 960 像素的宽度.这里应该填满屏幕的整个宽度.它包含一个宽度超过 960px 的图像，并且应该为整个屏幕宽度设置不同的背景颜色.

我不能轻易地从父 div 中取出那个 div，它会弄乱我布局的其他部分，而且会让整个事情变得很尴尬.

我发现了一些关于如何实现这一目标的技巧，但似乎没有一个适合我的要求.我的设计是响应式的，或者至少我正在努力实现这一点.我发现的技巧依赖于知道所涉及元素的大小，这在我的情况下是不固定的.

有没有办法在响应式布局中将内部 div 扩展到全屏宽度?

解决方案

您可以根据 vw(视口宽度)设置宽度.您也可以使用 calc 函数使用该值来计算 div 的左边距.通过这种方式，您可以将其放置在流内部，但仍然突出在居中的固定宽度 div 的左侧和右侧.

支持非常好.vw 所有主流浏览器都支持，包括 IE9+.calc() 也是如此.如果您需要支持 IE8 或 Opera Mini，这种方法就不太走运了.

-编辑-

正如评论中提到的，当页面内容高于屏幕时，这将导致水平滚动条.您可以使用 body {overflow-x: hidden;} 抑制滚动条.虽然以不同的方式解决它会很好，但是使用 left 和 right 的解决方案就像 宽度:100% 没有滚动条 在这种情况下不起作用.

-编辑 2021-

滚动条的另一种解决方法，根据您的情况可能可以接受也可以不接受:
通过使绿色 div 小一点，比如 20px，你可以为滚动条保留一点空间.保留宽度的一半可以添加到边距，以保持宽 div 居中:

#wide-div {宽度:计算(100vw - 20px)；margin-left: calc(-50vw + 50% + 10px);

div {最小高度:40px；box-sizing: 边框框；}#容器 {位置:相对；}#父母{宽度:400px；边框:1px纯黑色；边距:0 自动；}#某物 {边框:2px纯红色；}#wide-div {宽度:计算(100vw - 20px)；margin-left: calc(-50vw + 50% + 10px);边框:2px纯绿色；}

<div id="父级"><div id="something">红色</div><div id="wide-div">绿色<br>绿色<br>绿色<br>绿色<br>绿色<br>绿色<br>绿色<br>绿色
<div id="something-else">其他内容，如您所见，不在 Green 后面.</div>

The parent element of the whole page is a centered div limited to a max-width of 960px. All other elements on the page are children of that parent div. The simplified structure is the following:

<div id="parent">
  <div id="something"></div>
  <div id="wide-div"></div>
  <div id="something-else"></div>
</div>

While the parent div shouldn't expand beyond a width of 960px, the div I called "wide-div" here should fill the entire width of the screen. It contains a single image that is wider than the 960px, and it should set a different background color for the entire width of the screen.

I can't easily take that div out of the parent div, it would mess up other parts of my layout and it would make the whole thing rather awkward.

I found a few tricks on how you can achieve this, but none seemed to fit my requirements. My design is responsive, or at least I'm trying to achieve that. The tricks I found relied on knowing the size of the involved elements, which is not fixed in my case.

Is there a way to expand the inner div to the full screen width in a responsive layout?

解决方案

You can set the width based on the vw (viewport width). You can use that value too using the calc function, to calculate a left-margin for the div. This way you can position it inside the flow, but still sticking out on the left and right side of the centered fixed-width div.

Support is pretty good. vw is supported by all major browsers, including IE9+. The same goes for calc(). If you need to support IE8 or Opera Mini, you're out of luck with this method.

-edit-

As mentioned in the comments, when the content of the page is higher than the screen, this will result in a horizontal scrollbar. You can suppress that scrollbar using body {overflow-x: hidden;}. It would be nice though to solve it in a different way, but a solution using left and rightlike presented in Width:100% without scrollbars doesn't work in this situation.

-edit 2021-

Another work-around for the scrollbars, which may be acceptable or not depending on your situation:
By making the green div a little bit smaller, say 20px, you can keep a bit of space for the scrollbar. Half that reserved width can be added to the margin, to keep the wide div centered:

#wide-div {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);

div {
  min-height: 40px;
  box-sizing: border-box;
}
#container {
  position: relative;
}
#parent {
  width: 400px;
  border: 1px solid black;
  margin: 0 auto;
}

#something {
  border: 2px solid red;
}

#wide-div {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);
  border: 2px solid green;
}

<div id="container">
<div id="parent">
  <div id="something">Red</div>
  <div id="wide-div">Green


<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
</div>
  <div id="something-else">Other content, which is not behind Green as you can see.</div>
</div>
</div>

这篇关于如果容器 div 较小，如何将子 div 扩展到 100% 屏幕宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！