HTML块元素溢出其父元素

HTML block element overflowing its parent

本文关键字：元素 溢出 HTML      更新时间：2023-09-26

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

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;
}
<div class="page-wrapper">
    <div class="container-element">   
    
      <!--This element's height never changes once the page has been rendered-->
      <div>
          The hidden child element below will magically appear in: <span id="spCounter">10</span> seconds
      </div>
      
      <!--This element's height changes anytime after the page has been loaded-->
      <div id="daddyLongLegs" class="growing-element">
           Now you see me...
      </div>
    </div>
</div>

代码片段非常简单，javascript所做的就是在10秒后显示一个子元素(#daddyLongLegs)。使"问题"更有视觉色彩，使父元素(div.container-element)与子元素不同。

现在，当子元素(#daddyLongLegs)在10秒后显示时，它似乎不会"拉伸"父元素(div.container-element)。这不是我想达到的行为。我希望父元素在其内容改变时重新调整其高度。但是，父元素的高度必须始终覆盖整个文档

如何使父元素在内容改变后重新调整其高度?是否有纯css解决方案 ?

.container-element的定义高度为100%如果你删除它，或者将其设置为auto，它应该根据其内容计算高度。或者您可以将height更改为min-height，这将根据其内容计算高度，但不低于其父高度的100%。

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

所以从我的评论:

使用min-height: 100%代替height: 100%.page-wrapper

将height改为100%，margin改为0;

var counter;
var counterDisplay;
var intervalRef;
window.onload = function(){
console.log("loading");
	counter = 5;
	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:100%;
  display:none;  
  background-color:#ddd;
}
<div class="page-wrapper">
    <div class="container-element">   
    
      <!--This element's height never changes once the page has been rendered-->
      <div>
          The hidden child element below will magically appear in: <span id="spCounter">10</span> seconds
      </div>
      
      <!--This element's height changes anytime after the page has been loaded-->
      <div id="daddyLongLegs" class="growing-element">
           Now you see me...
      </div>
    </div>
</div>

相关文章：