Question

假设我有一个<div>（#container），它的宽度设置为960px。在<div>内，我想创建另一个与页面窗口一样宽的<div>（#drawer）。所以基本上，我想在<div>内创建一个比其父<div>宽的<div>：

<div id="container"> // Set at 960 px

<div id="drawer"> // I'd like this to be as wide as the window

</div>
</div>

CSS：

#content {
top:200px;
position:absolute;
width: 940px;
padding-bottom:100px;
}

#drawer {
????
}

--- ---更新

嘿所有人，

感谢所有答案。我想我应该让我的答案更容易理解。请参阅下面的某些视觉描述。我希望它有所帮助！

Answer 1

如果你让它绝对定位，你可以设置左右值。这样，如果您愿意，您仍然可以直接在#drawer上使用填充。

#container {
  top:200px;
  width: 940px;
  padding-bottom:100px;
  background-color:rgb(255,0,0);
}

#drawer {
  position:absolute;
  right: 0px;
  left:0px;
  background-color:rgb(0,255,0);
}

Answer 2

我认为儿童div可能比其父母更宽。也许如果你告诉我们你想要完成什么，我们可以帮助你。

Answer 3

我不知道你正在尝试用它做什么。但是，我认为这段代码可以正常工作（只需在#content中删除“position：absolute”：

<html>
    <head>
        <style type="text/css">
            #content {

                top:200px;
                width: 940px;
                padding-bottom:100px;
            }
            body {
                margin:0px;
                padding:0px;
            }
            #drawer {
                background-color:blue;
                top:0px;
                position:absolute;
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <div id="content"> 

            <div id="drawer">
                    a
            </div>
        </div>
    </body>

</html>

Answer 4

你可以使用javascript找出pageload上的屏幕宽度，然后将css width值设置为相同。这是一个糟糕的做法....但它仍然是一种方式。为什么你需要这样做？

Answer 5

我是第二个rudeovski ze熊的评论。但是，如果你想这样做，你需要明确地设置宽度（你不能依赖width: 100%，因为它总是使用包含div作为参考）。

所以你需要这样的东西：

#drawer
{
    width: 1200px;
}

您可以使用一点jQuery来使其更具动态性：

$(function() {
    var windowWidth = $(window).width();
    $('#drawer').css('width', windowWidth);
});

Answer 6

您可以使用负边距和calc()来计算 100vw - 容器宽度，左右边距全部取反并除以 2。

因为您知道父容器的宽度，在本例中为 940x，所以 #drawer 的负边距为：

margin-left: calc(-100vw / 2 + 940px / 2);
margin-right: calc(-100vw / 2 + 940px / 2);

提示！

为了让它更好看，您可以使用 940px 的变量。如果您使用 SASS，我相信您已经知道如何在那里使用变量。

如果您使用 CSS：

:root {
  --container-width: 940px;
}

然后：

margin-left: calc(-100vw / 2 + var(--container-width) / 2);
margin-right: calc(-100vw / 2 + var(--container-width) / 2);

（在使用var之前，请确保您需要的浏览器支持它：https://caniuse.com/css-variables）

您可以在此处观看实际操作，但请确保您的页面宽度超过 940 像素：https://stackblitz.com/edit/js-jscs4f

使<div>与页面</div>一样宽

6 个答案: