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