边栏改变内容宽度

Question

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

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

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

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

方法1：向右浮动

我使用了这个CSS：

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

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

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

方法2：绝对定位

我使用了这个CSS：

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

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

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

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

Answer 1

我现在选择的确实按照我的要求行事：减少身体标签的可用宽度 由于box-sizing，填充，边距，边框等，这并非易事，我相信我已经错过了很多边缘情况但是现在，以下逻辑对我有用：

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

代码：

＆＃13;

＆＃13;

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();

＆＃13;

* {
      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;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;