html - 改变内容宽度的侧边栏

Question

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

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

所以，所有这些基本上都有效 - 加载我的 iFrame 并设置 div 的样式。
问题是我对结果不满意。

我为 div 尝试了两种不同的样式:

方法一:向右浮动

我使用了这个 CSS:

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

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

https://jsfiddle.net/DHilgarth/mmzefm14/

方法二:绝对定位

我使用了这个 CSS:

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

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

https://jsfiddle.net/DHilgarth/34hmnw9h/1/

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

Answer 1

我现在选择了完全按照我的要求去做:我减少了 body 标签的可用宽度。
这不是微不足道的，因为 box-sizing、padding、margin、border 等，我确信我错过了很多边缘情况，但现在，以下逻辑对我有用:

如果 box-sizing 为 border-box:将 body 元素的右侧填充设置为侧边栏的宽度。 否则，将正文元素的宽度设置为正文元素的宽度减去侧边栏的宽度。在调整窗口大小时，必须相应地调整主体的宽度。

代码:

function initSidebar() {
  loadSidebar("sidebar");
}

// This code would be loaded from a javascript file I provide

function css(element, property) {
  return window.getComputedStyle(element, null).getPropertyValue(property);
}

function getSidebarWidth(sidebarElement) {
	var boundingRect = sidebarElement.getBoundingClientRect();
  return boundingRect.right - boundingRect.left;
}

function styleBorderBoxBody(bodyElement, sidebarElement) {
	bodyElement.style.paddingRight = getSidebarWidth(sidebarElement) + "px";
}

function resizeBody(bodyElement, previousWindowWidth, previousBodyWidth) {
  var currentWindowWidth = window.innerWidth;
  var newBodyWidth = previousBodyWidth - previousWindowWidth + currentWindowWidth;
  bodyElement.style.width = newBodyWidth + "px";
  return {currentWindowWidth, newBodyWidth};
}

function styleBody(bodyElement, sidebarElement) {
	var boxSizing = css(bodyElement, "box-sizing");
  if(boxSizing == "content-box" || !boxSizing || boxSizing == "") {
  	var sidebarWidth = getSidebarWidth(sidebarElement);
    var width = bodyElement.clientWidth - sidebarWidth;
    bodyElement.style.width = width + "px";
    sidebarElement.style.right = (-sidebarWidth) + "px";
    var windowWidth = window.innerWidth;
    window.addEventListener("resize", function(e) {
    	var newWidths = resizeBody(bodyElement, windowWidth, width);
      width = newWidths.newBodyWidth;
      windowWidth = newWidths.currentWindowWidth;
    });
  } else if(boxSizing == "border-box") {
  	styleBorderBoxBody(bodyElement, sidebarElement);
    window.addEventListener("resize", function(e) { styleBorderBoxBody(bodyElement, sidebarElement); });
  }
}

function loadSidebar(sidebarId) {
  var sidebarElement = document.getElementById(sidebarId);
  sidebarElement.className = "sidebar";
  var bodyElement = document.getElementsByTagName("body")[0];
  styleBody(bodyElement, sidebarElement);
}
// end: my code


initSidebar();

* {
      margin: 0;
      padding: 0;
    }

    html {
      
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    body {
      font: 14px/1.1 Helvetica, Sans-Serif;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      
    }

    #editor {
      width: 100%;
      height: 500px;
    }


    /* this class would be loaded from a CSS file I provide */
    .sidebar {
      border-color: green;
      border-style: solid;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100px;
    }

<div id="sidebar"></div>
<h1>Some UI from the existing website</h1>
<textarea id="editor">The text area</textarea>