CODEWITHSUNDEEP
htmlcsspositionfixed
user5670402
user5670402

Reputation:

right side of fixed div overflow its parent

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>

Upvotes: 2

Views: 1372

Answers (2)

Jaqen H&#39;ghar
Jaqen H&#39;ghar

Reputation: 16804

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:

  1. Try giving it position: absolute; and set the container to position: relative;.

  2. Use position: fixed; and set the size explicitly.

Upvotes: 2

andreas
andreas

Reputation: 16936

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>

Upvotes: 0

Related Questions