以其他像素為單位的div高度減去div高度的百分比

Question

我試圖獲取從高度為像素的標題中減去高度的邊欄高度的百分比。

<!--html-->
<div id="header"></div>
<div id="sidebar"></div>

<!--css-->
body{padding: 0; margin: 0;}
#header {position: fixed; width: 100%; height: 50px; background-color: yellow;}
#sidebar {position: fixed; width: 20%; background-color: blue; bottom: 0px; left: 0px; }

<!--js-->
$(document).ready(function(){   
    var bodyHeight = document.getElementByTagName("body").height();
    var headerHeight = document.getElementById("header").height();
    var sideBarHeight = (bodyHeight - headerHeight) / bodyHeight;
    $("#sidebar").css("height",sideBarHeight);
});

這是我的小提琴來檢查一下： https : //jsfiddle.net/Herza/7ks1qet1/4/

Answer 1

CSS應該能夠做到這一點：

 body{padding: 0; margin: 0;} #header {position: fixed; width: 100%; background-color: yellow; top:0; height: 50px; } #sidebar {position: fixed; width: 20%; background-color: blue; bottom: 0px; left: 0px; top:50px; } 

 <div id="header"></div> <div id="sidebar"></div> 

甚至與clac（）

 body{padding: 0; margin: 0;} #header {position: fixed; width: 100%; background-color: yellow; top:0; height: 50px; } #sidebar {position: fixed; width: 20%; background-color: blue; bottom: 0px; left: 0px; height: calc(100% - 50px); } 

 <div id="header"></div> <div id="sidebar"></div> 

您可以在整頁模式下運行兩個代碼片段，並調整窗口大小以對其進行檢查。

除了您添加的CSS / JS麻煩之外，我不太確定這是個好主意，標題和側邊欄對於內容和固定位置而言可能太小了，無法從屏幕上溢出什么……

Answer 2

如果需要百分比，則應將像素轉換回百分比。

這是你的意思嗎？

https://jsfiddle.net/7fkfvwrf/

 $(document).ready(function(){ var bodyHeight = $(document).height(); var headerHeight = $("#header").height(); var sideBarHeightPercentage = 100 / bodyHeight * (bodyHeight - headerHeight); $("#sidebar").css("height",sideBarHeightPercentage + "%"); }); 

 body{padding: 0; margin: 0;} #header {position: fixed; width: 100%; height: 50px; background-color: yellow;} #sidebar {position: fixed; width: 20%; background-color: blue; bottom: 0px; left: 0px; } 

 <div id="header"></div> <div id="sidebar"></div>