CODEWITHSUNDEEP
htmlcss
user2014429
user2014429

Reputation: 2567

get div inside fixed position parent div to 100% width

I have div1 nested inside a fixed positioned parent div called frame and div2 which has many rows of text. I want div1 to be the width of the page(100%), but it is being resized to as far as the text goes. is there a way get it to 100% and keep the frame div fixed. this jsfiddle demonstrates my problem. Thank you.

#div1 {
  border: 1px solid red;
  width: 100%;
}

#div2 {
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
}

#frame {
  position: fixed;
}
<div id="frame">
  <div id="div1">i should be as wide as the page</div>
</div>
<div id="div2">
  <p>x</p>
</div>

Upvotes: 2

Views: 71

Answers (3)

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

This will work for you.

You could always use vw for getting the #div1 to the page full width irrespective of its content or its parent's width.

Go with 100vw = 100% of the View Port Width

body{margin:0px;}
#div1 {
  border: 1px solid red;
  width: 100vw;
  position:relative;
}

#div2 {
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
}

#frame {
  position: fixed;
}
<div id="frame">
  <div id="div1">i should be as wide as the page</div>
</div>
<div id="div2">
  <p>x</p>
</div>

One more thing if you want to be more specific about it you can also use cal() for clearing the border pixels.

calc(100vw - 2px) = 100% of the View Port Width - border width

body {
  margin: 0px;
}

#div1 {
  border: 1px solid red;
  width: calc(100vw - 2px);
  position: relative;
}

#div2 {
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
}

#frame {
  position: fixed;
}
<div id="frame">
  <div id="div1">i should be as wide as the page</div>
</div>
<div id="div2">
  <p>x</p>
</div>

Upvotes: 3

Ignacio Mart&#237;nez
Ignacio Mart&#237;nez

Reputation: 891

#div1 will be as big as it's parent in this case #frame that is what 100% means.

Solution 1. [Recomended] Set #frame size E.g. width: 100%;

Solution 2. Set #div1 width based on your view port size E.g. width: 100vw;

Upvotes: 1

Athul Nath
Athul Nath

Reputation: 2606

Css edit

#frame {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
}

Upvotes: 3

Related Questions