[SOLVED] Using getComputedStyle with border-box should return height sans border and padding

Using getComputedStyle with border-box should return height sans border and padding

EDIT 3/Final: Th Computed Style problem/question is explained below but, for the benefit of others coming later, my real problem is solved with Flex Boxes and Vx measurements in conjunction with border-box. IMHO "display: flex;" is the answer to many questions and, although I'm struggling to get it to do what I want, stops you having to work against CSS!

EDIT 2: The following undoubtedly needs refactoring but if you can tell me that it does what I was asking for that'd be great. The change I had to make was to add clientTop in with offsetTop in the equation: -

function resizeContent()
{
var browserHeight = window.outerHeight;
var offesetHeight, offsetWidth;

var viewHeight = window.innerHeight;
var viewWidth  = window.innerWidth;

var chromeFootPrint = browserHeight - viewHeight;
var tmpHeight = viewHeight;

if (window.matchMedia("(orientation: portrait)").matches) {
    if (viewWidth > viewHeight) {
        viewHeight = viewWidth - chromeFootPrint;
        viewWidth = tmpHeight + chromeFootPrint;
    }
} else {
    if (viewWidth < viewHeight) {
        viewHeight = viewWidth - chromeFootPrint;
        viewWidth = tmpHeight + chromeFootPrint;
    }
}

var dimTarget  = logScroll;
var offsetTop  = dimTarget.offsetTop  + dimTarget.clientTop;
var offsetLeft = dimTarget.offsetLeft + dimTarget.clientLeft;

while (dimTarget = dimTarget.offsetParent) {
    offsetTop  += dimTarget.offsetTop  + dimTarget.clientTop;
    offsetLeft += dimTarget.offsetLeft + dimTarget.clientLeft;
}

logScrollHeight        = viewHeight - (offsetTop + fireBreak);
logScroll.style.height = logScrollHeight + "px";
logScroll.style.width  = getStyle(contentDiv).width;
logWindow.style.height = logScroll.style.height;
logWindow.style.width  = logScroll.style.width;

logWindow.scrollTop = logWindow.scrollHeight - logScrollHeight;

contentDiv.style.visibility = "visible"; // Now we're presentable
}

and this is the fire-break calculation: -

var outerStyle = getStyle(wholeScreen);
fireBreak = Number(outerStyle.paddingBottom.match("[0-9.]*"))
          + Number(outerStyle.borderBottomWidth.match("[0-9.]*"))
          ;

resizeContent();

EDIT 1: Ok, let me re-phrase the question: - How to I find out the height of my DIVs content with: -

width: 250px;
border: 3px solid green;    
padding: 0.5em;
box-sizing: border-box;

I am currently having to do this: -

logScrollHeight = viewHeight - 
    (offsetTop + Number(getStyle(headerDiv).paddingBottom.match("[0-9.]*")));

Original question: -

This is bound to be a duplicate but after nearly an hour of looking I have found many similar/identical questions but no real answer :-(

Why aren't the boundryWith and padding deducted from height?

Thankfully the boundryBottomWidth and PaddingBottom return have been converted to pixels (including the "px" string sadly) but doesn't the standard say that the usable height should be returned?

Solution

when you set box-sizing as border-box:

The width and height properties include the content, the padding and border, but not the margin

So when you use getComputedStyle to get a element's height, of course it includes the height of padding and border.

you can have a look at box-sizing property and css box model