Question

我有两个div：

<div id="container">
  <div id="content">
    I want this div to take the width of the browser!
  </div>
</div>

#container div的宽度大于屏幕宽度。我希望div #content占用浏览器的宽度。我正在使我的网站响应，当手机处于正常位置时，浏览器大小为320，当它是水平时，它是480.我希望#content响应地改变宽度。

我该怎么做？谢谢

修改

我认为我不能用css。我本来应该先解释一下，但在css中使用绝对定位的问题是我需要保持#content relative的位置，container是一个包含3个#content div的滑块。当我用手指滑动时，我希望活动的div占据屏幕的宽度。所以我不能真正使用绝对定位！

Answer 1

尝试使用：

$(window).resize(function() {
    $('#content').width($(this).width());
}).resize();

Answer 2

为什么#content的宽度为9000？听起来可能有更好的方法来实现您的设计。

那就是说，以下内容将起作用：

Demo Fiddle

HTML

<div id="container">
    <div id="content">I want this div to take the width of the browser!</div>&nbsp;
</div>

CSS

html, body {
    width:100%;
    margin:0;
    padding:0;
    position:relative;
}
#container {
    width:9000px;
}
#content {
    position:absolute;
    width:100%;
    background:red;
}

Answer 3

您希望在CSS和HTML中执行此操作。

首先，在html中使用视口。

<meta name="viewport" content="width=device-width, user-scalable=no">

然后在css中使用：

body{
width:100%;
overflow:hidden;
}

#container{
width:9000px; 
height:200px;
overflow-x:scroll;
overflow-y:hidden;
}

旁注 - 为什么你的容器是9000px？

最好将CSS作为流畅的结构而不是设置宽度来实现 - 所以请尝试以下方法：

#container{
width:100%;
overflow-x:scroll;
overflow-y:hidden;
}

#content {
width:auto;
height:100%;
}

假设你是在一个可滚动的内容之后，无论如何都需要全宽。

Answer 4

您可以CSS使用position:absolute #content然后设置宽度（在这种情况下为100％）来执行此操作：

#content { position: absolute; width: 100%; }

<强> SEE FIDDLE

但是，只有当它的父元素都没有position:relative时，这才有效。如果他们这样做，我会使用Felix的回答

Answer 5

Working demo

可以使用CSS本身完成：

#content {
    width: 100%;
}

如果您想根据屏幕分辨率自定义背景和其他属性，那么媒体查询是最佳选择

@media (max-width: 480px) {
   #content {
        width: 480px !important;
  }
}
@media (max-width: 30px) {
   #content {
        width: 480px !important;
  }
}

使div的宽度等于屏幕的宽度，无论其包含div的宽度如何

5 个答案:

Demo Fiddle