html检查元素是否溢出方法,javascript-HTML块元素溢出其父级

我遇到了我想避免的怪异(也许不是)行为,因为最终结果是糟糕的用户体验.为了帮助您理解问题,我在下面整理了代码片段.

var counter;

var counterDisplay;

var intervalRef;

window.onload = function(){

console.log("loading");

counter = 11;

counterDisplay = document.getElementById("spCounter");

intervalRef = setInterval(tickHandler, 1000);

};

function tickHandler(){

counter--;

counterDisplay.innerHTML = counter.toString();

if(counter == 0){

stop();

return;

}

}

function stop(){

clearInterval(intervalRef);

document.getElementById("daddyLongLegs").style.display = "block";

}

html,body{

width:100%;

height:100%;

font-family:Arial;

font-size:16px;

}

.page-wrapper{

height:100%;

background-color:#eee;

}

.growing-element{

height:800px;

display:none;

margin: 100px 100px 0 100px;

background-color:#ddd;

}

The hidden child element below will magically appear in: 10 seconds

Now you see me...

该代码段非常简单,所有javascript所做的就是在十秒钟后显示一个子元素(#daddyLongLegs).使“问题”更加直观,为与子元素不同的父元素(div.container-element)着色.

问题

现在,当子元素(#daddyLongLegs)在10秒后显示时,它似乎并未“拉伸”父元素(div.container-element).这不是我想要实现的行为.我希望父元素在其内容更改时重新调整其高度.但是,重要的是父元素的高度必须始终覆盖整个文档

题

内容更改后,如何使父母重新调整其高度？是否有一个纯CSS解决方案？

解决方法:

如MDN所述,您可以使用min-height属性而不是height,因此每当< div>的孩子上升时,它也会扩展父级

所以从我的评论：

use min-height: 100% instead of height: 100% on your

.page-wrapper

标签：css,html,javascript

来源： https://codeday.me/bug/20191118/2028292.html