コンテンツの幅を変更するサイドバー

Question

現在、既存のウェブサイトのプラグインを開発中です。
私のコンテンツをサイドバーに表示することを目的としています。そのために、ウェブサイトのオーナーは空のdivを作成し、javascriptファイルを参照し、空のdivのIDで自分のコードを呼び出します。

私のプラグインは、その空のdivでiFrameを作成し、コンテンツを読み込みます。また、提供されたdivを実際にサイドバーにスタイリングすることも担当しています。これは、divの幅と高さを変更し、それを画面の右端に貼り付けます。

だから、基本的にはすべてiFrameをロードしてdivをスタイリングしています。
問題は私が結果に満足していないことです。

私はdivのための2つの異なるスタイルを試してみました：

アプローチ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

私は、実際に私が求めていたものを実際に行うことを選択しました：私はbodyタグの利用可能な幅を減らします。
これはbox-sizing、パディング、マージン、ボーダーなどのない自明であると私はエッジケースの多くを見逃していると確信していますが、今のところ、以下のロジックは私のために働いている：border-boxある

box-sizing場合：セット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>