jj kk jj kk - 4 months ago 8
CSS Question

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>

Answer

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>

Comments