如何让所有内容固定在Frame div内？Ebay模板布局求助

一、让所有内容固定在Frame内，缩放不偏移 #

核心问题是使用固定margin值定位和无单位CSS属性，导致元素脱离容器控制。要实现画布式固定效果，按以下步骤修改：

1. 给.Frame设置固定宽度，添加相对定位和溢出隐藏：

.Frame {
  background-color: black;
  border: solid 20px maroon;
  width: 900px; /* 用固定宽度替代百分比+max-width */
  margin: 0 auto;
  position: relative; /* 作为内部绝对定位元素的基准容器 */
  overflow: hidden; /* 隐藏超出边框的内容 */
  min-height: 550px; /* 避免内容截断 */
}

2. 将所有margin定位的元素改为绝对定位，用left/top替代margin，确保元素始终相对于Frame定位：

.cigbutt {
  border: solid 3px white;
  width: 40px;
  height: 40px;
  border-radius: 50%; /* 用50%替代100px，更规范 */
  position: absolute;
  left: 510px;
  top: 140px; /* 计算好顶部距离，替代margin-top */
  background-color: #7B2424; /* 补全#号，颜色值才生效 */
  transition: all 0.3s; /* 缩短过渡时间，提升流畅度 */
  cursor: pointer; /* 提示可交互 */
}

.moretext {
  color: white;
  text-align: right;
  position: absolute;
  left: 450px;
  top: 60px;
  width: 160px;
}

.img1 {
  position: absolute;
  right: 10px; /* 用right替代left，避免右侧溢出 */
  top: 120px;
  width: 250px;
  height: 400px;
}

3. 修复.header的无效属性：

.header {
  border: solid 1px red;
  color: Red;
  height: 60px;
  width: 898px; /* Frame宽度900px，减去2px边框宽度 */
  font-size: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: cursive;
}

二、实现烟蒂的长按Puff效果 #

CSS的:active在移动端长按易失效，PC端松开鼠标即恢复，需结合JS实现持续的长按触发效果：

1. 给烟蒂元素添加ID方便JS获取：

<div class="cigbutt" id="cigButt"></div>

2. 添加JS监听长按事件（长按500ms触发效果，松开/离开时恢复）：

<script>
const cigButt = document.getElementById('cigButt');
let pressTimer;

cigButt.addEventListener('mousedown', () => {
  pressTimer = setTimeout(() => {
    cigButt.classList.add('puff'); // 添加puff类触发效果
  }, 500);
});

['mouseup', 'mouseleave'].forEach(event => {
  cigButt.addEventListener(event, () => {
    clearTimeout(pressTimer);
    cigButt.classList.remove('puff');
  });
});
</script>

3. 在CSS中添加.puff类的样式：

.cigbutt.puff {
  background-color: #EE4007;
  box-shadow: 0 0 20px rgba(238, 64, 7, 0.8); /* 添加光晕模拟冒烟效果 */
}

修改后的完整代码 #

CSS #

.Frame {
  background-color: black;
  border: solid 20px maroon;
  width: 900px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  min-height: 550px;
}

.header {
  border: solid 1px red;
  color: Red;
  height: 60px;
  width: 898px;
  font-size: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: cursive;
}

.cigbutt {
  border: solid 3px white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  left: 510px;
  top: 140px;
  background-color: #7B2424;
  transition: all 0.3s;
  cursor: pointer;
}

.cigbutt:hover {
  background-color: #BF3D12;
}

.cigbutt.puff {
  background-color: #EE4007;
  box-shadow: 0 0 20px rgba(238, 64, 7, 0.8);
}

.moretext {
  color: white;
  text-align: right;
  position: absolute;
  left: 450px;
  top: 60px;
  width: 160px;
}

.text {
  color: white;
  width: 400px;
  margin: 20px; /* 添加margin避免贴边 */
}

.img1 {
  position: absolute;
  right: 10px;
  top: 120px;
  width: 250px;
  height: 400px;
}

HTML #

<div class="Frame">
  <div class="header">
    Hot Girls And Cigarette Butts
  </div>

  <div class="text">
    I do not know what to put down so here as an example so here is a hot girl and an interactive circle that looks and acts like a cigarette butt. Please notice how the frame moves but everything else just magically hovers.
  </div>

  <div class="cigbutt" id="cigButt"></div>

  <div class="moretext">
    hover over circle to light long press circle to puff
  </div>

  <img class="img1" src="https://optimize.webmavens.in/?key=1949128684&url=https://prodimages.everythingneon.com/giant/n105-1565-pole-dance-girls-1-neon-sign.jpg" alt="Neon sign of pole dance girls">

  <script>
    const cigButt = document.getElementById('cigButt');
    let pressTimer;

    cigButt.addEventListener('mousedown', () => {
      pressTimer = setTimeout(() => {
        cigButt.classList.add('puff');
      }, 500);
    });

    ['mouseup', 'mouseleave'].forEach(event => {
      cigButt.addEventListener(event, () => {
        clearTimeout(pressTimer);
        cigButt.classList.remove('puff');
      });
    });
  </script>
</div>

内容的提问来源于stack exchange，提问作者Nick Dangerous