有没有办法删除 Hugo Academic 中特定页面的 margins/padings？

Question

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

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

但是 iframe 目前的位置已经是 0 填充，所以我可以将它向右移动，但不能向左移动。

具体可以调整吗objects/pages？

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，根据我的计算这是它加载的网站的高度，但后来我得到了一个滚动条，我假设你不喜欢滚动。

引用有关它实际工作原理的文章：

The idea here is: push the container to the exact middle of the browser window with left: 50%;, then pull it back to the left edge with negative -50vw margin.

最后一点，vw 单位是 视口单位 ，更具体地说是视口的宽度，其中 100vw 是 100%视口宽度。

原回答如下：

我没有用学术主题测试过这个，但是在我自己的网站上（建立在 Hugo 上，但这应该无关紧要）这使得 iframe 成为页面的整个宽度，无论内容：

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

使用 position: absolute，iframe 将尽可能靠近 window 的左侧放置（感谢 left: 0）。然后我们用width: 100%让它填满页面。

您还应该考虑向 iframe 添加一个 class 或一个 id，这样您就可以将其用于样式而不是 <iframe> 元素，以防万一您碰巧有多个同一页面上的 iframe。

有没有办法删除 Hugo Academic 中特定页面的 margins/padings？

Is there a way to remove margins/padings for specific pages in Hugo Academic?

html

css

hugo

blogdown