3

我有这样的事情：

<body>
    <div style="width:700px; margin:0 auto;">
        <div class="inner-div"></div>
    </div>
</body>

有没有办法将具有“inner-div”类的子 div 扩展到身体宽度的 100%？

4

8 回答 8

7

这使得inner-div从左到右拉伸：

div.inner-div {
  position: absolute;
  left: 0;
  width: 100%;
}
于 2012-07-13T14:14:54.543 回答
3

这是一篇旧帖子，但我在这里找到了更好的解决方案：如果容器 div 较小，如何将子 div 扩展到 100% 屏幕宽度？

所以在这种情况下

.inner-div {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

于 2017-03-23T19:51:16.223 回答
1

我没有对此进行测试，但它可能会起作用：

为此，您需要 jQuery。

//I'm using a resize event in case the body with changes. At least i think that will work.
window.onresize = function(event) {
    var bWidth = $("body").width():
    $(".inner-div").width(bWidth);
}
于 2012-07-13T14:14:59.323 回答
1

不是只有css。由于您为父级设置了 700px 的值，因此子级继承了它。但是你可以用 javascript 做到这一点。这里有 jquery：

$(window).bind("load resize", function(){
  $('.inner-div').width($('body').width());
});

即使您调整窗口大小，它也可以工作。

于 2012-07-13T14:18:41.527 回答
1

让我稍微纠正一下。

您还需要为您的拉伸元素提供一些以像素/em 为单位的“最小宽度”值，并且（不是必需的，但很好的做法）也为 body 元素提供最小宽度。

IE：

body {
  min-width: 1000px;
}

.outer {
  width: 1000px;
  height: 200px;
  margin: auto;
}

.inner {
  position: absolute;
  min-width: 1000px;
  height: 100px;
  left: 0;
  right: 0;
}

如果没有设置最小宽度并且您的 HTML/CSS 不是为响应式站点构建的，则在调整浏览器窗口大小时，您可能会在内部 DIV 元素处看到错误。属性“width: 100%”使元素总是拉伸到浏览器窗口大小的 100%。因此，如果浏览器视口变得小于内容并且出现滚动条，则内部 DIV 将保持在实际浏览器视口大小，从而导致在您滚动站点时外观似乎被破坏。

你可以在这里试试：http: //jsfiddle.net/W4vum/

尝试将示例中“.inner”DIV 的“最小宽度”值从 1000px 更改为 100%，调整窗口大小并滚动到一侧，然后您会看到它。

于 2013-11-27T11:19:10.197 回答
0

如果将宽度 100% 指定给内部 div，它将适合外部 div 的宽度。

于 2012-07-13T14:16:19.010 回答
0

一个如何用css做的小例子，所以在javascript中设置我猜想的属性是一样的：http: //jsfiddle.net/u8mJW/。

于 2012-07-13T14:16:51.190 回答
0

为了使这项工作在纯 CSS 中工作，所有父元素都必须是position:static; （或没有位置属性，因为静态是默认值）

之后你可以使用 Stefan 的代码

div.inner-div {
  position: absolute;
  left: 0;
  width: 100%;
}

（更正了 Ricola3D 的小提琴：http: //jsfiddle.net/u8mJW/23/）

于 2013-07-10T12:08:56.463 回答