我目前正在爲現有網站開發插件。
其目的是爲我的內容顯示一個邊欄。爲此，網站所有者創建一個空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：絕對定位

回答

相關問題