以其他像素为单位的div高度减去div高度的百分比

Question

I am trying to get percentage of a side bar height of which height is subtracted from a header of which height is in pixel.

<!--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);
});

Here is my fiddle to check it out: https://jsfiddle.net/Herza/7ks1qet1/4/

Answer 1

CSS should be able to do do this:

 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> 

or even with 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> 

you can run both snippets in fullpage mode and resize you window to check on it.

Beside the CSS/JS trouble you add, i'm not too sure it is a good idea, header and sidebar might be too small for content and in fixed position , what overflow off screen is unreachable ...

Answer 2

If you want a percentage you should convert the pixels back to a percentage.

Is this what you meant?

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>