html - Wordpress - 如何阻止 WPBakery 构建的页面上的 Pardot 表单在某些浏览器尺寸上添加滚动条？

Question

所以我使用 WPBakery 页面构建器构建了这个 Wordpress 页面，并向其中添加了一个 Pardot 表单。在某些浏览器尺寸上，表单(看起来像是一个 iframe 元素)比它所在的容器大，因此它添加了滚动条来补偿。是否有推荐的解决方案来防止这种情况发生？见附图:

Picture of Pardot form forcing scrollbars

Answer 1

如果您不能完全确定表单是否为 iframe 元素，您可以尝试使用 CSS 并使用动态宽度和高度值(例如 width: 100%; 代替表单字段)类似于 width: 250px;，它会自动调整元素的大小以适应可用宽度。这将处理水平滚动条。

对于垂直滚动条，您可以尝试使用伪属性定位滚动条来操纵它的样式或完全隐藏它。您可以在这里阅读更多相关信息:

https://css-tricks.com/almanac/properties/s/scrollbar/

但值得注意的是，不强烈推荐这种方法，因为它对不同浏览器和平台的支持有限。

但是，对于这个特定的垂直滚动条，它似乎是表单容器上的高度或填充问题，因此您可以使用 @media 查询来定位它，以使其在整个过程中更具响应性设备。

希望对您有所帮助!