设置 div 宽度等于窗口大小答案

【问题标题】：Set div width equal to window size设置 div 宽度等于窗口大小
【发布时间】：2014-01-12 19:26:45
【问题描述】：

我有一个宽度为 1300 像素的容器。在容器内我有其他 div。
我需要将内部 div 宽度设置为等于浏览器窗口大小，例如）1900px。
内容应该响应窗口大小。

我的html代码如下：

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

CSS：

.container {
   width: 1300px;
} 

.content{
  width: 100%
}`

【问题讨论】：

【解决方案1】：

如果您的 div 宽度为 px 格式，则它不会响应。它必须是% 格式。如果您将内部内容设置为width:100%，则内部内容将具有“.container”的宽度。
因此，为了让内部 div 成为窗口宽度，您应该让 .container 等于窗口宽度。

CSS：

.container{
   width:100%;
}

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

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

【讨论】：

【解决方案2】：

您似乎想将content div 作为模式窗口打开，隐藏其余的正文元素。试试这个JSBIN DEMO

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

【讨论】：

【解决方案3】：

将容器更改为

.container {
   width: 100%;
}

【讨论】：

【解决方案4】：

有了固定的width: 1300px;，你就不能有responsive to the window size div

正如codehorse所说，添加

.container {
   width: 100%;
}

但添加

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

如果事先设置了父元素的尺寸，width: 100%; 的 css 将正确呈现！！

【讨论】：

【解决方案5】：

移除容器的默认（引导）最大宽度并将内容宽度设置为 100%

.content{
      width: 100%;
}

.contianer{
       max-width: none; 
}

【讨论】：