Javascript HTML块元素溢出其父元素

我遇到了一个我想避免的奇怪（也许不是）行为，因为最终的结果是一个可怕的用户体验。为了帮助您理解这个问题，我将下面的代码片段放在一起

var计数器；
var计数器显示；
var intervalRef；
window.onload=函数（）{
控制台日志（“加载”）；
计数器=11；
计数器显示=document.getElementById（“spCounter”）；
intervalRef=设置间隔（tickHandler，1000）；
};
函数处理程序（）{
计数器--；
counterDisplay.innerHTML=counter.toString（）；
如果（计数器==0）{
停止（）；
返回；
}
}
函数停止（）{
clearInterval（intervalRef）；
document.getElementById（“daddyLongLegs”）.style.display=“block”；
}

html，正文{
宽度：100%；
身高：100%；
字体系列：Arial；
字体大小：16px；
}
.页面包装器{
身高：100%；
背景色：#eee；
}
.生长元素{
高度：800px；
显示：无；
余量：100px 100px 0 100px；
背景色：#ddd；
}

下面隐藏的子元素将在：10秒内神奇地出现
现在你看到我了。。。

。容器元素的定义高度为
100%
如果将其删除，或将其设置为
auto
，则应根据其内容计算高度。
或者您可以从
高度
更改为
最小高度
，这将根据其内容计算高度，但不小于其父级高度的100%。
将高度更改为100%，边距更改为0


var计数器；
var计数器显示；
var intervalRef；
window.onload=函数（）{
控制台日志（“加载”）；
计数器=5；
计数器显示=document.getElementById（“spCounter”）；
intervalRef=设置间隔（tickHandler，1000）；
};
函数处理程序（）{
计数器--；
counterDisplay.innerHTML=counter.toString（）；
如果（计数器==0）{
停止（）；
返回；
}
}
函数停止（）{
clearInterval（intervalRef）；
document.getElementById（“daddyLongLegs”）.style.display=“block”；
}
html，正文{
宽度：100%；
身高：100%；
字体系列：Arial；
字体大小：16px；
}
.页面包装器{
身高：100%；
背景色：#eee；
}
.生长元素{
身高：100%；
显示：无；
背景色：#ddd；
}

下面隐藏的子元素将在：10秒内神奇地出现
现在你看到我了。。。
如上所述，您可以使用
最小高度
属性而不是
高度
，因此每当您的
的子项升高时，它也会扩展父项

所以从我的评论来看：

使用
minheight:100%
代替您的电脑屏幕上的
height:100%
。页面包装器

使用
minheight:100%
而不是
height:100%
在你的
页面包装上！愚蠢的我！添加该评论作为答案，以便我可以接受。谢谢，这与要求的行为完全不同