Question

我遇到了很多问题，我需要一个内部容器的宽度（比如一个设置宽度为960px的包装器）来跨越100％的宽度，而且我无法触及html所以它必须一切都用css完成。

我知道我可以定位：绝对;那家伙打破了他的包装......但还有另一种......更好的方法吗？

这是一个JsFiddle链接，可以帮助它更清晰：

<!-- html -->
<div id="container">
    <div id="inner-container"></div>
</div>

<!-- CSS -->

#container {
    width: 500px;
    height: 500px;
    background: gray;
    margin: auto;
}

/* here's the container that I want to be 100% */
#inner-container {
    width: 100%; /* :( */
    height: 100px;
    background: black;
}

编辑：

这是一个jsFiddle与我的绝对位置版本......我想知道的是，如果没有绝对定位可以做到这一点

http://jsfiddle.net/KRyF6/3/

<div id="container2">
    <div id="inner-container2">
</div>

#container2 {
    width: 500px;
    height: 500px;
    background: gray;
    margin: auto;
    clear: both;
    margin-top: 20px;
}
#inner-container2 {
    background: black;
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0;
}

Answer 1

还有另一种方法可以做到这一点。

身体 - ＆gt;容器 - ＆gt;子

现在这样，标题建议将宽度传递给容器，从容器传递给它的孩子。通过这种方式，孩子可以获得身体的总宽度。

<强>解释

您面临的唯一问题是静态宽度不会记住<body>宽度（也就是视口）。因此，您必须使用宽度的百分比值，因此<body>上的基于：

#container { /*width: 500px;*/ width: 70%; height: 500px; background: gray; margin: auto; }

现在，孩子知道其父（#container）的宽度是整个身体的70％。

然而，100％的宽度只能获得<body>宽度的70％。相反，你需要100％+ 70％的30％。 70％的30％就像42％（35％就是50％）。

现在我们获得了<body>的100％。现在你可以让它看起来像是在容器宽度之外的一个负边距。要使它居中，你希望它是你刚刚计算出的42％（=身体的30％）的减半的一半：

#inner-container { /*width: 100%; /* :( */ width: 142%; margin-left: -21%; height: 100px; background: black; }

jsFiddle

但是，这是否易于使用？

这是你问题的答案。可以不使用position: absolute。

绝对会更容易吗？

肯定：

#inner-container { width: 100%; /* :( */ height: 100px; background: black; position: absolute; left: 0; }

只有两行代码没有任何计算：）

jsFiddle

Answer 2

我要站出来对这个说“不”。没有办法使内部div跨越页面的整个宽度而不会将其从文档流中分离出来，即绝对定位它。

Answer 3

我认为只有绝对的位置才能做到：

#inner-container {
    width: 100%; /* :( */
    height: 100px;
    background: black;
    left: 0;
    position: absolute;
}

<强> Fiddle

Answer 4

实际上，这可以通过calc（）与视口单元vw

一起完成

FIDDLE - 使用iE10 +

#inner-container {
    height: 100px;
    background: black;
    width: 100vw;
    margin-left: calc(250px - 50vw);
}

实际上，根据the spec（参见示例14） - 此应该可以（即所有浏览器），但现在有{{ 3}}其中calc不适用于视口单元。

或者你可以这样做：

#inner-container {
    height: 100px;
    background: black;
    margin-right: calc(250px - 50vw);
    margin-left: calc(250px - 50vw);
}

- 这种方式 - 在IE中它会看起来像所需，而在其他浏览器上，它会看起来像你拥有它。的 a bug

什么是在其设置宽度父容器之外打破div的最佳方法

4 个答案:

身体 - ＆gt;容器 - ＆gt;子

jsFiddle

jsFiddle

FIDDLE - 使用iE10 +