Make <div> as wide as page_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-01 05:51 出处：网络

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 basic

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!

Make <div> as wide as page

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

I don't think it's possible for a child div to be wider then its parent. Maybe if you told us what you were trying to accomplish, we could help you.

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>

you can find out the width of the screen on pageload using javascript and then set the css width value to the same. this is a bad way of doing it....but its still a way. Why do you need to do this btw ?

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

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

Make <div> as wide as page

精彩评论

关注公众号

热门标签

图文推荐

Make <div> as wide as page

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：