如果容器div较小,如何将子div扩展到100%的屏幕宽度？

Question

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

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

虽然父div不应该扩展到960px的宽度,但我在这里称为"wide-div"的div应该填满整个屏幕宽度.它包含一个比960px宽的单个图像,它应该为整个屏幕宽度设置不同的背景颜色.

我不能轻易地从父div中取出那个div,它会弄乱我的布局的其他部分,这会使整个事情变得相当尴尬.

我发现了一些关于如何实现这一目标的技巧,但似乎没有一个符合我的要求.我的设计很敏感,或者至少我试图实现这一目标.我发现的技巧依赖于知道所涉及元素的大小,这在我的情况下并不固定.

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

Answer 1

您可以根据vw(视口宽度)设置宽度.您也可以使用该calc函数使用该值来计算div的左边距.这样您就可以将其放置在流动内部,但仍然会在中心固定宽度div的左侧和右侧伸出.

支持非常好.所有主流浏览器vw都支持,包括IE9 +.同样的道理calc().如果你需要支持IE8或Opera Mini,那么你对这种方法感到不满意.

-编辑-

如评论中所述,当页面内容高于屏幕时,这将导致水平滚动条.您可以使用禁止滚动条body {overflow-x: hidden;}.虽然以不同的方式解决它会很好,但是在Width:100%没有滚动条的情况下使用left和right类似的解决方案在这种情况下不起作用.

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>

Answer 2

你现在可以这样做

.full-width {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

或这个

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

更多详细信息： https://css-tricks.com/full-width-containers-limited-width-parents/

Answer 3

经过大量研究,我找到了这个解决方案:在固定宽度容器内创建全宽(100%)容器.我认为这是最好的解决方案,因为它不依赖于任何外部因素,只取决于您想要扩展的div.

<div class="container" style="width: 750px; margin: 0 auto;">
   <div class="row-full">
     --- Full width container ---
   </div>   
</div>

.row-full{
     width: 100vw;
     position: relative;
     margin-left: -50vw;
     left: 50%;
}

Answer 4

通常,响应元素,引导程序或Foundation,允许您添加"行"元素.您可以将"wide-div"放在带有"row"的元素外部,它应该展开以占据整个宽度.

或者,您可以对该元素使用绝对定位,忽略大多数继承的设置:

.wide-div {
    position: absolute;
    left: 0;
    right: 0;
}

Answer 5

我有点惊讶在过去四年里没有人提供以下内容。cssposition:fixed属性将项目拉出并相对于窗口进行缩放。在某些情况下，这可能不起作用，但如果您正在使用 Javascript 处理模式框或其他东西，则这可以正常工作。

.wide-div{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%; // in case you need to cover the height as well
    background-color:rgba(0,0,0,.8); //just so you can see the div is on top of your content
    z-index:1; // you may need to adjust the index of your other elements as well
}