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是supported by all major browsers, including IE9+。 calc()也是如此。如果你需要支持IE8或Opera Mini，那么你对这种方法感到不满意。

-edit -

如评论中所述，当页面内容高于屏幕时，这将导致水平滚动条。您可以使用body {overflow-x: hidden;}取消滚动条。虽然以不同的方式解决它会很好，但使用Width:100% without scrollbars中提供的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

经过大量研究，我找到了这个解决方案：Creating full width (100% ) container inside fixed width container。我认为这是最好的解决方案，因为它不依赖于任何外部因素，只取决于您想要扩展的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 3

通常，响应元素，引导程序或基础允许您添加“行”元素。你可以将“wide-div”放在带有“row”的元素之外，它应该展开以占据整个宽度。

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

 String heightText = (String) engine.executeScript("window.getComputedStyle(document.body,null).getPropertyValue('height')");
    double height = Double.valueOf(heightText.replace("px", ""));
    String widthText = web1.getEngine().executeScript(
            "window.getComputedStyle(document.body,null).getPropertyValue('width')"
    ).toString();
    double width = Double.valueOf(widthText.replace("px", ""));
    web1.setPrefHeight(height);
    web1.setPrefWidth(width);
    System.out.println(height + "  " + width);


}

Answer 4

您可以使用vw。演示http://jsfiddle.net/fsLhm6pk/

＆＃13;

.parent {
  width: 200px;
  height: 200px;
  background: red;
}

.child {
  width: 100vw;
  height: 50px;
  background: yellow;
}

＆＃13;

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

＆＃13;

你是对的，这不会与中心div一起工作。试试这个：

编辑http://jsfiddle.net/fsLhm6pk/1/

＆＃13;

.parent {
  width: 200px;
  height: 200px;
  background: red;
  margin: 0 auto;
}

.child {
  width: 100%;
  left: 0;
  right: 0;
  position: absolute;
  height: 50px;
  background: yellow;
}

＆＃13;

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

＆＃13;

Answer 5

你现在可以这样做

.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;
}

更多细节： {{3}}

Answer 6

我的 50 美分在这里..

虽然我发现其他人的答案也正确，但我认为需要提及一个旧的 css 技巧来存档这个

.wide-div {    
   padding: 0 9999%;
   margin: 0 -9999%;
}

同样在这种情况下，如果出现水平滚动条，您可以使用

解决此问题

body {overflow-x: hidden;}

视情况而定，这段代码的不同之处在于这里的内部内容与父宽度保持对齐

body {overflow-x: hidden;} 

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

#something {
  border: 2px solid red;
}
#something-else {
  border: 2px solid red;
}

#wide-div {
  padding: 0 9999%;
    margin: 0 -9999%;
  border: 2px solid green;
}

<div id="parent">
  <div id="something">Red</div>
  <div id="wide-div">Wide</div>
  <div id="something-else">Other content</div>
</div>

Answer 7

在过去的四年中，没有人提供以下产品，我感到有些惊讶。 css position:fixed属性将项目拉出并相对于窗口缩放。在某些情况下，这可能行不通，但如果您使用模式框或其他方式编写Java脚本，则效果很好。

.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
}

如果容器div较小，如何将子div扩展为100％的屏幕宽度？

7 个答案: