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

我目前正在使用的网站是https://twobyfore.com。目前有一个iframe为英雄头部显示一个Codepen，其中有一个ID为#lp-code-196的div。这div有造型，浏览器上的流体容器缩小尺寸

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

这工作，以适应股利屏幕宽度（移动，13" ，17" ），但是，我刚才注意到，在瘦身的浏览器的宽度，白水沟启动出现在任何一边（https://snag.gy/qwE1XH.jpg）。

我已经尝试使用一些jQuery的，

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

除了这并没有成功地解决了宽度+白水沟的问题。

有人会知道如何解决这个问题吗？

来源

2017-03-01 Ivan RL

有在编辑CodePen没有机会？ – SpyderScript

你会对Codepen做什么版本？ –

因为你的问题不是minified，很难给出完整的答案。但是问题在于你有一个固定宽度的容器，.lp-positioned-content，然后是内部的内容，你试图在其容器之外延伸。这是不好的做法。这里是你有什么一个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的width到100%和left至0。

执行相同的.lp-positioned-content

与要水平居中在页面上为margin: 0 auto和东西都创建一个固定宽度的容器，它

来源

2017-03-01 19:06:18 SpyderScript

所以我们使用Unbounce构建页面，这是他们设置HTML的方式。根据你提到的，我实际上已经设计出一种hacky方法来将iframe从.lp定位的内容中取出，并将其转换为另一个宽度与身体成比例的div。 –

具有讽刺意味的是，大多数宣传'不需要编码'或'没有IT'的产品往往让用户想要，或者无论如何都要求IT帮助。但我很乐意提供帮助。注意：在将来，您可能会考虑提及您在问题中使用的任何页面生成器或框架，以便获得更多专业化的帮助。 – SpyderScript

关于页面生成器/框架的好处。当我发布问题时，我绝对需要在清晰度和实质上进行工作。再次感谢您指引我朝着正确的方向发展！ –

我没有推开它仍然活着，但是这是该代码似乎很好地摆脱浏览器调整大小的排水沟。

中的JavaScript：

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

的CSS：

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

来源

2017-03-01 19:57:41

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

回答

相关问题