Question

我目前正在处理的网站是https://twobyfore.com。目前有一个iframe为英雄标题显示Codepen，其中有一个ID为#lp-code-196的div。这个div有造型，

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

这已经成功地将div与屏幕宽度相匹配（在移动设备上，13“，17”），但是，我注意到，在缩小浏览器宽度时，白色排水沟开始出现在任一侧（{{3} }）。

我试图使用一些jQuery，

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

除了这没有解决宽度+白色天沟问题。

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

Answer 1

因为您的问题不是minified，所以很难给出完整的答案。但是问题在于你有一个固定宽度的容器.lp-positioned-content，然后是内容，你正试图在容器之外扩展。< / strong>这是不好的做法。以下是您所拥有的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>

让你开始：

将width #lp-code-196设为100%，将left设为0。

对.lp-positioned-content
执行相同操作
使用margin: 0 auto创建一个固定宽度的容器，并将要在页面上水平居中的所有内容填入其中

Answer 2

我还没有把它推到现场但是这个代码似乎很好地摆脱了浏览器调整大小的阴沟。

JavaScript：

  #lp-code-196 {
    z-index: 0;
    display: block;
    width: 100%;
    left: 0;
    top: 0;
  }

CSS：

{{1}}

浏览器上的流体容器缩小

2 个答案: