将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%
}`

Answer 1

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

CSS：

.container{
   width:100%;
}

或者如果你想我们可以使用jQuery：

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

Answer 2

看起来你想打开你的content div作为模态窗口，隐藏其余的身体元素。试试这个JSBIN DEMO

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

Answer 3

将容器更改为

.container {
   width: 100%;
}

Answer 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%;将正确呈现给你...

working demo

Answer 5

删除默认的容器（引导程序）最大宽度并将内容宽度设置为100％

.content{
      width: 100%;
}

.contianer{
       max-width: none; 
}