How to define Height of DIV Filho, through the depth of the Scroll of DIV Pai

Question

I’m having a little trouble applying the depth size of the scroll dynamic vertical of the first div, in the second div superimposed.

Code:

// Vamos criar a segunda Div, no qual ficará sobreposta a primeira Div
var sobrepor = document.createElement('div');
sobrepor.setAttribute('id', 'escala');
sobrepor.setAttribute('height', 'tam' + 'px');
document.getElementById('teste').appendChild(sobrepor);

/* Agora temos de capturar a profundidade do Scroll 
da primeira Div para setar na segunda Div e pronto! */

var obj = document.getElementById('teste');
var tam = obj.scrollHeight;
obj.scrollTop = tam;

/* Para nós termos uma idéia real, vamos nos utilizar 
do resultado de profundidade do Scroll da Div principal */

alert(tam);

#escala {
    position : absolute;
    top : 0; 
    left : 0;
    width : 50%;
    margin: 0 25% auto;
    background : steelblue; 
    z-Index : 1; 
    opacity : 0.1;
}

#teste {
    position : relative;
    width : 400px; 
    height : 200px; 
    margin : 0 auto;
    border : thin solid green; 
    overflow : auto; 
}

#profundidade {
    height : 800px;
}

<div id='teste'>
    <p id='profundidade'></p>
</div> 

I have been wandering alone a method to achieve the goal, but I decided to share this problem by making a new post.

Answer 1

Solved!!! - variable tam inside style.height

// Vamos criar a segunda Div, no qual ficará sobreposta a primeira Div
var sobrepor = document.createElement('div');
sobrepor.setAttribute('id', 'escala');
document.getElementById('teste').appendChild(sobrepor);

// Agora temos de capturar a profundidade do Scroll da primeira Div
// Para aplicarmos, a mesma profundidade dinâmica na segunda Div
var obj = document.getElementById('teste');
var tam = obj.scrollHeight;
obj.scrollTop = tam;
document.getElementById('escala').style.height = tam + 'px';

#escala {
    position : absolute;
    top : 0; 
    left : 0;
    width : 50%;
    margin: 0 25% auto;
    background : steelblue; 
    z-Index : 1; 
    opacity : 0.1;
}

#teste {
    position : relative;
    width : 400px; 
    height : 200px; 
    margin : 0 auto;
    border : thin solid green; 
    overflow : auto; 
}

#profundidade {
    height : 800px;
}

<div id='teste'>
    <p id='profundidade'></p>
</div> 

Solution

document.getElementById('escala').style.height = tam + 'px';