Jquery 浏览器上的流体容器缩小尺寸

我目前工作的网站是。当前有一个iframe显示英雄标题的代码笔，其中有一个id为

#lp-code-196

的div。这个部门有样式

position: relative;
width: 100vw;
left: calc(-50vw + 50%);

这使div与屏幕宽度相适应（在移动设备上，13“，17”），但是，我刚刚注意到，在缩小浏览器宽度时，两侧开始出现白色水槽（）

我尝试使用一些jQuery

$(window).resize(function() {
  $('#lp-code-196').css('width', $(window).width);
});

但这并不能解决宽度+白色边沟的问题

---

有人知道如何纠正这个问题吗？

因为你的问题不是，所以很难给出完整的答案。但是，问题在于，您有一个固定宽度的容器，

.lp定位了内容

，然后是其中的内容，您试图将其扩展到容器之外。这是一种不好的做法。以下是您的XML版本：

<container width="900px">
  <div-that-tries-to-be-100%-screen-width>
  </div-that-tries-to-be-100%-screen-width>
</container>

以下是您应该尝试的：

<div width="100%" position="relative">
  <cool-iframe width="100%" position="absolute"></cool-iframe>
  <container width="900px">
    <header>Top producers aren't satisfied with average.</header>
    ...
  </container>
</div>

顶级制作人对平均水平不满意。
...

首先，请执行以下操作：

将

lp-code-196的
宽度设置为
100%
，将
左侧设置为
0

对

.lp定位内容执行相同操作

创建一个具有

边距：0 auto

的固定宽度容器，并将希望在页面上水平居中的所有内容填充到其中

---

我还没有推出它的生活，但这是代码，似乎是工作得很好，以摆脱水槽上的浏览器调整大小

JavaScript：

<script>
  $(document).ready(function() {
    var element = $('#lp-code-196');
    $(element).remove();
    $('#lp-pom-block-8').append(element);
  });
</script>

---

没有机会编辑代码笔？你会对代码笔做什么版本？所以我们使用unbound来构建我们的页面，这就是他们设置HTML的方式。按照你提到的，我实际上设计了一种黑客方法，将iframe从.lp定位的内容中取出，放入另一个宽度随主体缩放的分区。讽刺的是，大多数广告

无需编码或
无需编码的产品
通常都会让用户想要，或者要求帮助。但我很乐意帮忙。注意：在将来，你可以考虑在这个问题中使用任何页面生成器或框架，这样你就可以得到更专业的帮助。当我发布问题时，我肯定需要在清晰性和实质性方面下功夫。再次感谢你为我指明了正确的方向！
  #lp-code-196 {
    z-index: 0;
    display: block;
    width: 100%;
    left: 0;
    top: 0;
  }