Make <div> as wide as page
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!
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
加载中,请稍侯......
精彩评论