right side of fixed div overflow its parent

Question

I am trying to put a position:fixed div inside an another div. I want a fixed div which has a width:100%; so it will be great for mobile and desktop at the same time.

Here is my JSfiddle

SF wants some code:

<div id="container">
  <div id="item">This div is good div</div>
  <div id="fixed">Right side of this div overflow its parent!!! </div>
</div>

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ — Ricky Ruiz, Aug 04 '16 at 18:57

Jaqen H'ghar · Answer 1 · 2016-08-04T19:13:45.487

2

An element with position: fixed; ignores the parent size because it is relative only to the viewport:

MDN:

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.

You can:

Try giving it position: absolute; and set the container to position: relative;.
Use position: fixed; and set the size explicitly.

edited Aug 04 '16 at 19:13

answered Aug 04 '16 at 18:55

Jaqen H'ghar

16,186
8
49
52

but it does not ignore parents left margin – Aug 04 '16 at 18:57
It is placed in the document by its static position and then it is taken out of the normal document flow – Jaqen H'ghar Aug 04 '16 at 19:06

andreas · Accepted Answer · 2016-08-04T19:12:54.470

You can use the calc() method to adapt the viewport size. Just subtract right and left margin from the 100%:

Edit: I added a min-height to the body to see the "fixed-effect" on scrolling

body {
  margin: 0;
  min-height: 1000px;
}
#container {
  margin: 10px;
  background: black;
  color: white;
}
#item {
  height: 50px;
  width: 100%;
}
#item {
  background: blue;
}
#fixed {
  height: 50px;
  width: calc(100% - 20px);
  background: green;
  position: fixed;
}

<div id="container">
  <div id="item">Normal div</div>
  <div id="fixed">Fixed div</div>
</div>

right side of fixed div overflow its parent

2 Answers2