javascript - 获取以像素为单位的其他 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);
});

这是我用来检查的 fiddle :https://jsfiddle.net/Herza/7ks1qet1/4/

Answer 1

如果您想要百分比，您应该将像素转换回百分比。

这是你的意思吗？

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>