设置 div 宽度等于窗口大小

Posted 2023-03-06

【中文标题】设置 div 宽度等于窗口大小

【英文标题】：Set div width equal to window size

【发布时间】：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);

【讨论】：

如果像水平滚动一样跟随 div 的数量，则使用 min-width: 100%; 将每个 div 占据全宽。如果帮助某人

，这是评论

【参考方案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 将正确呈现！！

working demo

【参考方案5】：

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

.content
      width: 100%;


.contianer
       max-width: none;