Question

我在Hugo Academic网站的index.md页面中有一个iframe对象，我希望页面的整个宽度都没有边距（附有屏幕截图）。我将此代码添加到了.md文件中：

<style>
iframe {
  margin-left: 0;
  padding-left: 0;
}
</style>

目前iframe的位置已经有0个填充，因此我可以将其向右移动，但不能向左移动。

可以针对特定的对象/页面进行调整吗？

iframe看起来像这样：

<iframe src="https://ruslankl.shinyapps.io/roc_simulation/" width=1000 height=1000" frameborder="0"></iframe>

Screenshot

Answer 1

我做了一些研究，发现this article有几个更好的解决方案。我最初的解决方案有效，但是它使iframe浮动在其余内容的顶部，我们不希望这样做。

因此，由于上面提到的文章，我想出了以下在您的网站上有效的方法：

iframe {
  height: 1000px; /* Set this to the height you want the iframe to have. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

请注意height之后的评论。您需要在iframe上设置固定高度，以防止iframe的内容被剪切掉。我首先将其设置为650px，根据我的计算，这是它加载的网站的高度，但是随后我有了一个滚动条，并且我想您不希望进行滚动。

引用有关其实际工作方式的文章：

这里的想法是：将容器向左推到浏览器窗口的正中间：50％;，然后以负-50vw的边距将其拉回到左侧。

最后要注意的是，vw单位是视口单位，更具体地说是视口的宽度，其中100vw是视口宽度的100％。

下面的原始答案：

我还没有使用学术主题对此进行过测试，但是在我自己的网站（基于Hugo构建，但这没关系）上，这使iframe可以占据页面的整个宽度，而与内容上的空白或空白无关：

iframe {
    left: 0;
    position: absolute;
    width: 100%;
}

使用position: absolute，将iframe放置在尽可能靠近窗口左侧的位置（由于left: 0）。然后，我们使用width: 100%使其充满页面。

您还应该考虑向iframe添加类或ID，以便在同一页面上碰巧有多个iframe的情况下，可以将其用于样式而不是<iframe>元素。

有没有一种方法可以删除Hugo Academic中特定页面的页边距/空白？

1 个答案: