固定 div 的右侧溢出其父项

Question

我正在尝试将 position:fixed div 放入另一个 div 中。我想要一个固定的 div，它有一个 width:100%;，所以它同时适用于移动设备和桌面设备。

这是我的JSfiddle

SF 想要一些代码：

<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 1

具有 position: fixed; 的元素忽略父级大小，因为它仅与视口相关：

MDN:

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

您可以：

尝试给它 position: absolute; 并将容器设置为 position: relative;。
使用 position: fixed; 并明确设置大小。

Answer 2

您可以使用calc()方法调整视口大小。只需从 100% 中减去左右边距：

编辑：我在正文中添加了一个最小高度以在滚动时看到 "fixed-effect"

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>

固定 div 的右侧溢出其父项

right side of fixed div overflow its parent

html

css

position

fixed