Question

我有这样的事情：

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

有没有办法用class“inner-div”扩展子div到100％的体宽？

Answer 1

这使inner-div从左向右延伸：

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

Answer 2

我没有对此进行过测试，但可能会工作：

你需要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);
}

Answer 3

仅限css。由于您为父级设置了一个700px的with，所以子级继承了它。但你可以用javascript做到这一点。这里有jquery：

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

即使您调整窗口大小，它也能正常工作。

Answer 4

让我纠正一下。

你还需要给你的拉伸元素一些“min-width”值，以像素/ em为单位（不是必要但是很好的练习）给body元素一个min-width。

即：

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的“min-width”值从1000px更改为100％，调整窗口大小并滚动到侧面，然后就可以看到它。

Answer 5

这是一篇旧帖子，但我在这里找到了更好的解决方案：How can I expand a child div to 100% screen width if the container div is smaller?

所以在这种情况下它将是

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

Answer 6

如果给内部div赋予宽度100％，它将适合外部div的宽度。

Answer 7

关于如何使用css进行操作的一个小例子，因此在javascript中设置我猜测的属性是相同的：http://jsfiddle.net/u8mJW/。

Answer 8

要在纯CSS中完成此工作，所有父元素必须为position:static; （或没有position属性，因为static是默认值）

之后你可以使用Stefan的代码

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

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

如何使用100％的体宽扩展子<div>？</div>

8 个答案: