Html 更改内容宽度的边栏

我目前正在为现有网站开发一个插件。
它的目的是显示包含我的内容的侧边栏。为此，网站所有者创建一个空div，引用我的javascript文件，并使用空div的ID调用我的代码

然后，我的插件在该空div中创建一个iFrame并加载其内容。它还负责设置所提供的div的样式，使其实际上是一个边栏：它更改该div的宽度和高度，并将其附加到屏幕的右边缘

因此，所有这些基本上都在工作——加载iFrame并设置div的样式。
问题是我对结果不满意

我尝试了两种不同的div风格：

方法1：向右浮动 我使用了这个CSS：

float: right;
height: 100%;
width: 100px;

position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100px;

问题是它不会改变页面其余部分的总宽度。换句话说，网站上宽度为100%的元素将显示在我的侧边栏下方

方法2：绝对定位 我使用了这个CSS：

float: right;
height: 100%;
width: 100px;

position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100px;

这种方法的问题是，我的侧边栏现在只是与网站上的控件重叠

---

有没有办法实现我想要的？一个边栏，它基本上减少了除我之外的所有元素的

主体的可用大小。
我现在选择了完全按照我的要求去做：我减少主体标记的可用宽度。

这不是一件小事，因为
框大小、填充、边距、边框等，我确信我错过了很多边缘案例，但目前，以下逻辑对我有效：

如果
框大小
为
边框框
：将主体元素的右侧填充设置为我的侧边栏的宽度。
否则，将主体元素的宽度设置为主体元素的宽度减去侧边栏的宽度。调整窗口大小时，必须相应调整主体的宽度

代码：


函数initSidebar（）{
加载侧栏（“侧栏”）；
}
//这段代码将从我提供的javascript文件中加载
函数css（元素、属性）{
返回窗口.getComputedStyle（元素，null）.getPropertyValue（属性）；
}
函数getSidebarWidth（sidebarElement）{
var boundingRect=sidebarElement.getBoundingClientRect（）；
返回boundingRect.right-boundingRect.left；
}
函数styleBorderBoxBody（bodyElement、sidebarElement）{
bodyElement.style.paddingRight=getSidebarWidth（sidebarElement）+“px”；
}
函数resizeBody（bodyElement、previousWindowWidth、previousBodyWidth）{
var currentWindowWidth=window.innerWidth；
var newBodyWidth=previousBodyWidth-previousWindowWidth+currentWindowWidth；
bodyElement.style.width=newBodyWidth+“px”；
返回{currentWindowWidth，newBodyWidth}；
}
函数styleBody（bodyElement、sidebarElement）{
var-boxsize=css（bodyElement，“盒子大小”）；
如果（框大小==“内容框”| |！框大小| |框大小==”）{
var sidebarWidth=getSidebarWidth（sidebarElement）；
var width=bodyElement.clientWidth-sidebarWidth；
bodyElement.style.width=宽度+“px”；
sidebarElement.style.right=（-sidebarWidth）+“px”；
var windowWidth=window.innerWidth；
window.addEventListener（“调整大小”，函数（e）{
var newWidths=resizeBody（bodyElement、windowWidth、width）；
宽度=newWidths.newBodyWidth；
windowWidth=newWidths.currentWindowWidth；
});
}else if（框大小=“边框框”）{
styleBorderBoxBody（bodyElement、sidebarElement）；
addEventListener（“resize”，函数（e）{styleBorderBoxBody（bodyElement，sidebarElement）；}）；
}
}
函数加载侧边栏（侧边栏）{
var sidebarElement=document.getElementById（sidebarId）；
sidebarElement.className=“侧边栏”；
var bodyElement=document.getElementsByTagName（“body”）[0]；
styleBody（bodyElement、sidebarElement）；
}
//结束：我的代码
initSidebar（）
*{
保证金：0；
填充：0；
}
html{
}
*,
*：之前，
*：之后{
框大小：继承；
}
身体{
字体：14px/1.1 Helvetica，无衬线；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
身高：100%；
}
#编辑{
宽度：100%；
高度：500px；
}
/*这个类将从我提供的CSS文件中加载*/
.侧边栏{
边框颜色：绿色；
边框样式：实心；
位置：固定；
排名：0；
右：0；
底部：0；
宽度：100px；
}

现有网站的一些用户界面
文本区域