Question

我有一个width: 1000px的div，里面是一个孩子，我想跨越浏览器窗口的整个宽度。

麻烦的是，我不知道如何覆盖以前的宽度继承。

我可以将它放在我的容器div之外，但这将是一个巨大的不便和解决方法，除非当然这同样麻烦。

标记：

<div class="centreContainer">

    <div class="menuContainer"></div>

</div>

CSS：

html, body
{
    margin: 0;
    padding: 0;
}

.centreContainer
{
    margin: auto;
    width: 1000px;
}

.menuContainer
{
    width: <what to do>;
    height: 420px;
}

我最好只想要一个CSS解决方法，我想到了一些愚蠢的Javascript解决方案，你可以获得浏览器窗口的宽度，然后将menuContainer的宽度设置为：

<variable> / 10 （10因为1000/100 = 10，其中1000是中心容器的宽度）

并在margin: auto;上设置menuContainer，使其居中。

Answer 1

只需使用position：

.menuContainer
{
    position: absolute;
    width: 100%;
    height: 420px;
}

Answer 2

只需使用此jsfiddle

中显示的position:absolute即可

.menuContainer
{
    width: 100%;
    height: 420px; 
    position: absolute;
}

Answer 3

您可以尝试将.menuContainer作为绝对位置放入相对父位置。 JSfiddle

#root{
display:block;
position: relative;

}

.menuContainer{
position:absolute;
top: 50px;
left: 0;

}

100％浏览器宽度Div内部较小的Div

3 个答案: