0

EDIT 3/Final: Th Computed Style の問題/質問は以下で説明されていますが、後で来る他の人の利益のために、私の本当の問題は Flex Boxes と Vx 測定をボーダーボックスと組み合わせて解決されます。私見「表示：フレックス;」は多くの質問に対する答えであり、私がやりたいことを実行するのに苦労していますが、CSS に対して作業する必要はありません!

編集 2: 以下は間違いなくリファクタリングが必要ですが、私が求めていたことがうまくいくと教えていただければ、それは素晴らしいことです。私がしなければならなかった変更は、方程式のoffsetTopでclientTopを追加することでした： -

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
}

そして、これは防火計算です: -

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

resizeContent();

編集1:わかりました、質問を言い換えさせてください:-DIVコンテンツの高さを調べる方法:-

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

私は現在これをしなければなりません: -

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

元の質問: -

これは重複するに違いありませんが、1時間近く調べた後、多くの類似/同一の質問を見つけましたが、本当の答えはありません:-(

高さからboundryWithとパディングが差し引かれないのはなぜですか?

ありがたいことに、boundryBottomWidth と PaddingBottom の戻り値はピクセルに変換されています (悲しいことに "px" 文字列を含む) が、標準では使用可能な高さを返す必要があるとは言われていませんか?

4

2 に答える 2

0

box-sizing を border-box として設定した場合:

幅と高さのプロパティには、コンテンツ、パディング、ボーダーが含まれますが、マージンは含まれません

したがって、getComputedStyle を使用して要素の高さを取得する場合、もちろんパディングとボーダーの高さも含まれます。

box-sizing プロパティとcss box modelを見ることができます

于 2017-07-15T13:32:41.623 に答える