HTML块级元素溢出其父元素

Question

我遇到了一个奇怪的（或许不是）行为，我希望避免这种情况，因为最终结果会导致用户体验非常糟糕。为了帮助您理解问题，我编写了下面的代码片段。

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）颜色区分于子元素。

问题：

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

问题：

一旦内容更改，如何使父元素重新调整其高度？是否有纯css解决方案？

- Leo

---

在你的.page-wrapper上使用min-height: 100%代替height: 100%。 - moped

@moped 该死！我真蠢！把那个评论作为答案添加，这样我就可以接受它了。谢谢伙计。 - Leo

Answer 1

.container-element 的高度被设置为 100%。 如果你将它移除或者将高度设置为 auto，它会根据内容自动计算高度。 或者你可以改为使用 min-height，它可以根据内容自动计算高度，但不会低于父元素的高度。

- Hugo Silva

Answer 2

如MDN所述，您可以使用min-height属性而不是height，这样每当您的<div>子元素上升时，它也会扩展父元素。

因此，根据我的评论：

在您的.page-wrapper上使用min-height: 100%而不是height: 100%

- moped

Answer 3

将高度更改为100％，将边距更改为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>

- Deepak Sharma

---

这是完全不同于所请求的行为。 - moped