当前位置：文江博客话题详情

使
与页面一样宽

发布于 2024-12-02 20:23:09 字数 848 浏览 1 评论 0 原文

假设我有一个

(#container)，其宽度设置为 960px。在该

内，我想创建另一个与页面窗口一样宽的

(#drawer)。所以基本上，我想在

中创建一个比其父

更宽的

：

<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 {
????
}

---更新---

大家好，

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

原文

Let's say I have a <div> (#container) that's set to 960px for it's width. Inside that <div> , I want to create another <div> (#drawer) that's as wide as the page window. So basically, I would like to create a <div> within a <div> that's wider than its parent <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 {
????
}

---Update---

Hey Everyone,

Thanks for all the answers. I guess I should make my answer a little easier to follow. See below for some sort of visual description. I hope it helps!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏九 2024-12-09 20:23:09

如果你使其绝对定位，你可以设置左值和右值。这样，如果您愿意，您仍然可以直接在 #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);
}

Well you could set botht he left and right values if you make it absolutely positioned. This way you can still use padding directly on the #drawer if you want to.

#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);
}

回复收藏 0 原文

画离情绘悲伤 2024-12-09 20:23:09

我认为子 div 不可能比其父 div 更宽。也许如果您告诉我们您想要实现什么目标，我们可以帮助您。

回复收藏 0 原文

坚持沉默 2024-12-09 20:23:09

我不知道你想用它做什么。但是，我认为这段代码是有效的（只需删除 #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>

i dunno what you're trying to do with that. But, i think this code works (by just removing "position : absolute" in #content :

<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>

回复收藏 0 原文

土豪 2024-12-09 20:23:09

您可以使用 javascript 找出页面加载时屏幕的宽度，然后将 css 宽度值设置为相同。这是一个不好的方法......但它仍然是一种方法。顺便说一句，你为什么需要这样做？

回复收藏 0 原文

那一片橙海， 2024-12-09 20:23:09

我同意鲁德奥夫斯基·泽·熊的评论。但是，如果您想这样做，则需要显式设置宽度（不能依赖 width: 100%，因为它始终使用包含的 div 作为参考）。

所以你需要类似的东西：

#drawer
{
    width: 1200px;
}

你可以使用一点 jQuery 来使其更加动态：

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

I second rudeovski ze bear's comment. However, if you want to do this, you'll need to set the width explicitly (you can't rely on width: 100%, because it will always use the containing div for reference).

So you'll need something like:

#drawer
{
    width: 1200px;
}

You can use a little jQuery to make this more dynamic:

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

回复收藏 0 原文

鹤舞 2024-12-09 20:23:09

您可以使用负边距和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）

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

You can use negative margins and calc() to calculate the 100vw - container width, all negated and divided by 2 for the left and right margin.

Because you know the width of your parent container, 940x in this case, the negative margins for the #drawer would be:

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

Tip!

To make it nicer, you can use a variable for 940px. If you use SASS, I'm sure you already know how to use variables there.

If you use CSS:

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

and then:

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

(Before using var, please ensure it is supported by the browsers you need: https://caniuse.com/css-variables)

You can watch it in action here, but please make sure your page is wider than 940px: https://stackblitz.com/edit/js-jscs4f

回复收藏 0 原文

~没有更多了~

关于作者

少女情怀诗

暂无简介

0 文章

0 评论

484 人气

关注发私信

友情链接

文江博客

使
与页面一样宽

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

使 与页面一样宽

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

使
与页面一样宽

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。