Reputation: 3526
Is there anyway to set width of absolute element 100% and fit the screen ( not parent ) inside relative element? Here is my code
<div class="relative">
...
<div class="absolute"></div>
...
</div>
Css code:
.relative{
position:relative;
width:600px;
}
.absolute{
border:1px solid red //draw a line across screen
position:absolute;
width:100%;
}
Upvotes: 2
Views: 10053
Reputation: 20034
@CooPer: If the parent with position relative doesn't have 100% width, the child with position absolute will fit the "parent" width if you set 100% width for child element. Meaning the child class will account for 300px of border only as below example.
.parent {
position: relative;
width: 300px;
height: 200px;
}
.child {
border: 1px solid red;//draw a line across screen
position: absolute;
width: 100%;
}
<div class="parent">
<div class="child"></div>
</div>
So if you want child 100% and fit the screen. Try below.
.parent {
position: relative;
width: 300px;
height: 200px;
}
.child {
border: 1px solid red;//draw a line across screen
position: absolute;
width: 100vw;//take up 100% viewport width
}
<div class="parent">
<div class="child"></div>
</div>
vw, vh was supported since IE9. http://www.w3schools.com/cssref/css_units.asp
Upvotes: 0
Reputation: 44118
From one edge of the screen to the next edge is a full length of viewport. The easiest way to achieve that is using vw
(viewport width) 100vw is full width of viewport. To stretch out the absolute positioned div left and right are both at 0. Made a line by using border-bottom
.
div {} .A {
min-width: 100%;
position: relative;
background: rgba(255, 0, 0, .4);
height: 200px;
}
.B {
min-width: 100vw;
position: absolute;
right: 0;
left: 0;
background: blue;
height: 100px;
border-bottom: 3px solid yellow;
}
<div class='A'>
<div class='B'></div>
</div>
Upvotes: 0
Reputation: 122155
Yes you can use 100vw
which is equal to window width and also use calc
to position of absolute element. So if width of parent element is 50%
to position absolute element to left: 0
of window you can use transform: translate(calc(-100vw + 75%))
which in this case is equal to -25vw
.
html,
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.relative {
position: relative;
width: 50%;
background: lightblue;
height: 50px;
margin: 0 auto;
}
.absolute {
position: absolute;
left: 0;
background: black;
height: 2px;
top: 50%;
width: 100vw;
transform: translate(calc(-100vw + 75%), -50%);
}
<div class="relative">
<div class="absolute"></div>
</div>
Upvotes: 5
Reputation: 8795
Try this,
body{
margin:0;
}
.relative{
position:relative;
}
.absolute{
width:100%;
height:1px;
background:red;
position:absolute;
}
Upvotes: 0
Reputation: 1550
Add a 1px height div for the line and give it 100vw width.
HTML
<div class="relative">
...
<div class="absolute"></div>
<div class="line"></div>
...
</div>
CSS
.relative{
position:relative;
width:600px;
}
.line {
height:1px;
width:100vw;
background:red;
}
.absolute{
position:absolute;
width:100%;
}
Fiddle https://jsfiddle.net/3ysh1rwt/2/
Upvotes: 1
Reputation: 377
Just set left: 20px; and right: 20px; and remove width: 100%
.box2 {
position: absolute;
padding: 50px 0;
color: #000;
background: #fff;
border: solid thin #06F;
}
or add left: 20px; and the calc function width: calc( 100% - 40px )
.box2 {
position: absolute;
width: calc( 100% - 40px );
padding: 50px 0;
color: #000;
background: #fff;
border: solid thin #06F;
}
Upvotes: 3