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

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

所以，所有这一切基本上工作 - 加载我的iFrame和样式的股利。
问题是我对结果不满意。

我已经尝试了两种不同风格的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的可用尺寸，除了我的？

来源

2017-04-12 Daniel Hilgarth

我现在已经选择了实际做到的要求：我减少了身体标记的可用宽度。
这是因为box-sizing，填充，边距，边框等不平凡的，我相信我已经错过了很多的边缘情况，但就目前而言，以下逻辑为我工作：

如果box-sizing是border-box：集body元素的右边填充到我侧边栏的宽度。否则，请将body元素的宽度设置为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) { 
 
\t var boundingRect = sidebarElement.getBoundingClientRect(); 
 
    return boundingRect.right - boundingRect.left; 
 
} 
 

 
function styleBorderBoxBody(bodyElement, sidebarElement) { 
 
\t 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) { 
 
\t var boxSizing = css(bodyElement, "box-sizing"); 
 
    if(boxSizing == "content-box" || !boxSizing || boxSizing == "") { 
 
    \t 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) { 
 
    \t var newWidths = resizeBody(bodyElement, windowWidth, width); 
 
     width = newWidths.newBodyWidth; 
 
     windowWidth = newWidths.currentWindowWidth; 
 
    }); 
 
    } else if(boxSizing == "border-box") { 
 
    \t 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>

来源

2017-04-12 16:14:30

更改内容宽度的侧边栏

方法1：浮动权

方法2：绝对定位

回答

相关问题