动态创建<div>-clientHeight / Width为0？

Question

这让我发疯，而且看似简单。我有一个填充客户区的父元素。我正在尝试动态创建4个子元素，以将父元素分成4个象限。因为我希望元素在浏览器调整大小时能够自动调整大小，所以我试图将顶部/左侧/高度/宽度设置为百分比。这不仅似乎不起作用，而且还有另一个问题。如果在开发人员工具中使用元素选择器，则可以选择子元素，并且该子元素至少显示一些像素的高度和宽度值。但是将clientHeight和clientWidth值记录到控制台会显示0。这对我来说没有意义-它们应与元素的大小匹配。这是一些清理后的示例代码（Typescript）：

function createQuadrants($parentElement: JQuery<HTMLElement>): void {
    var q1: HTMLDivElement = document.createElement('div');
    q1.id = 'quad-1';
    q1.style.top = '0%';
    q1.style.left = '0%';
    q1.style.width = '50%';
    q1.style.height = '50%';
    $parentElement.append(q1);
    logDimensions(q1);
    //
    var q2: HTMLDivElement = document.createElement('div');
    q2.id = 'quad-2';
    q2.style.top = '0%';
    q2.style.left = '50%';
    q2.style.width = '50%';
    q2.style.height = '50%';
    $parentElement.append(q2);
    logDimensions(q2);
    //
    var q3: HTMLDivElement = document.createElement('div');
    q3.id = 'quad-3';
    q3.style.top = '50%';
    q3.style.left = '0%';
    q3.style.width = '50%';
    q3.style.height = '50%';
    $parentElement.append(q3);
    logDimensions(q3);
    //
    var q4: HTMLDivElement = document.createElement('div');
    q4.id = 'quad-4';
    q4.style.top = '50%';
    q4.style.left = '50%';
    q4.style.width = '50%';
    q4.style.height = '50%';
    $parentElement.append(q4);
    logDimensions(q4);
}
function logDimensions(elem: HTMLDivElement): void {
    console.log('dimensions:'
        + '\n  clientHeight:\t' + elem.clientHeight
        + '\n  clientWidth:\t' + elem.clientWidth
        + '\n  scrollHeight:\t' + elem.scrollHeight
        + '\n  scrollWidth:\t' + elem.scrollWidth);
}

我在做什么错？预先感谢！