Question

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

这是我的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:

固定定位类似于绝对定位，但元素的包含块是视口。

你可以：

尝试提供position: absolute;并将容器设置为position: relative;。
使用position: fixed;并明确设置尺寸。

Answer 2

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

编辑：我在身体上添加了一个最小高度，以查看＆＃34;固定效果＆＃34;在滚动

＆＃13;

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;
}

＆＃13;

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

＆＃13;

固定div的右侧溢出其父级

2 个答案: