爲什麼你可以使用CSS設置html外部div的高度，但不是內部仍然摺疊？

Question

只是一個小問題，以幫助提高我對html/CSS行爲的理解。我注意到下面的代碼：

.nav { 
 
    border:1px solid black; 
 
    height:100px; 
 
}

<div class="nav"> 
 
    <div class="container"> 
 
    <h1>Hello</h1> 
 
    </div> 
 
</div>

我可以設置外層div「導航」的高度。

但是，如果我嘗試對內部div .container執行相同操作，它將保持摺疊狀態，直到它填充「Hello」。我能問一下解釋這種行爲的原因嗎？

感謝

Answer 1

如果我理解你的權利，你想知道爲什麼.container不能沒有任何的子元素中可以看出？如果添加的東西，有一個高度（爲<h1>元素）它擴展到該元素的高度（見1和2 .container之間的差）

如果你想.container默認要擴大，就可以添加一個height: 100%，將其擴展到外部容器的高度。

.nav { 
 
    border:1px dotted black; 
 
    height:100px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.container { 
 
    border:1px solid red; 
 
} 
 

 
.container2 { 
 
    border:1px solid green; 
 
    height: 100%; 
 
}

<div class="nav"> 
 
    <div class="container"> 
 
    <h1>Hello</h1> 
 
    </div> 
 
</div> 
 

 
<div class="nav"> 
 
    <div class="container"> 
 
    </div> 
 
</div> 
 

 
<div class="nav"> 
 
    <div class="container2"> 
 
    </div> 
 
</div>