CODEWITHSUNDEEP
htmlcss
Ali Akbar Azizi
Ali Akbar Azizi

Reputation: 3526

Absolute positioning inside relative with 100% width

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

Answers (6)

trungvose
trungvose

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

zer00ne
zer00ne

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

Nenad Vracar
Nenad Vracar

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

frnt
frnt

Reputation: 8795

Try this,

body{
  margin:0;
}
.relative{
  position:relative;
}

.absolute{
width:100%;
height:1px;
background:red;
position:absolute;
}

Upvotes: 0

Roysh
Roysh

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

M Muneer
M Muneer

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

Related Questions