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

问题描述

整个页面的父元素是一个居中的div，其最大宽度限制为960px.页面上的所有其他元素都是该父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>

虽然父div的宽度不得超过960px，但我在此处称为宽div"的div应该会填满屏幕的整个宽度.它包含一个比960px宽的图像，并且应该为整个屏幕宽度设置不同的背景颜色.

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.

我不能轻易地将该div从父div中移除，这会弄乱我的布局的其他部分，并使整个过程变得很尴尬.

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.

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

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

推荐答案

您可以基于vw设置宽度(视口宽度).您也可以使用calc函数使用该值来计算div的左边界.这样，您可以将其定位在流中，但仍突出在居中固定宽度div的左侧和右侧.

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.

支持非常好. vw受所有主要浏览器(包括IE9 + )的支持. calc() 也是如此.如果您需要支持IE8或Opera Mini，那么使用这种方法就很不幸了.

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.

-编辑-

如评论中所述，当页面的内容高于屏幕时，这将导致水平滚动条.您可以使用body {overflow-x: hidden;}取消滚动条.最好以其他方式解决它，但是使用left和right的解决方案如

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.

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

#something {
  border: 2px solid red;
}

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

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

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