设置 div 宽度等于窗口大小

Question

我有一个宽度为 1300 像素的容器。在容器内我有其他 div。

我需要将内部 div 宽度设置为等于浏览器窗口大小，例如）1900px。

内容应该响应窗口大小。

我的html代码如下：

 <div class="container">
  <div class="content">Some style goes here </div>
</div>

CSS：

 .container {
   width: 1300px;
}

.content{
  width: 100%
}`

原文由 eshwar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您有 px 格式的 div 宽度，它将不会响应。它必须是 % 格式。如果您将内部内容设置为 width:100% 内部内容将具有“.container”的宽度。

因此，为了使内部 div 成为窗口宽度，您应该使 .container 等于窗口宽度。

CSS：

 .container{
   width:100%;
}

或者，如果您愿意，我们可以使用 jQuery：

  var w = $(window).width();
 $('.content').css('width', w);

原文由 Rijin Mk 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

看起来您想打开 content div 作为模态窗口，隐藏其余的正文元素。试试这个 JSBIN 演示

.content {
  position: fixed;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
}

原文由 Sachin Jain 发布，翻译遵循 CC BY-SA 3.0 许可协议