iframe - 在网站上注入面板

Question

我想在网站的右侧注入一个 iframe 来创建一个垂直面板。作为“面板”，我的意思是：它应该在右侧，覆盖页面的整个可见高度，不受滚动影响，而是“推送”网站内容（而不是封面）。

我尝试修改 padding-right on ，但它不适用于所有网站（并且只影响非定位元素）。

它应该适用于任何布局怪异的网站，例如http://orange.jobs/

注入不是问题（它是 Chrome 扩展程序）。

Answer 1

您可以通过 css 执行此操作。要覆盖整个可见高度并使该元素的位置固定在站点上，请执行以下操作：

position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100px;

尽量不要使用

height: 100%;

因为每个浏览器都会以不同的方式呈现。请改用顶部和底部。您可以选择具有百分比或像素值的宽度。

这个 css 代码可以应用于每个 html 元素。如果定位有问题，请尝试添加

display: block;

或者

display: inline-block;

我为此添加了一个jsFiddle。

更新：
要使面板不覆盖网站内容，请在 body 标签中添加边距：

body {
    margin-right: 100px;
}

边距应该是面板的宽度。jsFiddle