爲什麼mu內容設置爲100％高度時內容溢出

Question

我的佈局有一個頁眉和頁腳，並在這些內容div之間。

當我將我的內容高度設置爲100％時，它溢出而不是展開div。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
.header, 
 
.footer { 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="header"> 
 
    <h1>Heading</h1> 
 
</div> 
 
<div class="content"> 
 
    <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque 
 
    montesque rhoncus quis eros. Vestnunc nonummy</p> 
 

 
    <span> 
 
       Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy 
 
      </span> 
 
    <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque 
 
    montesque rhoncus quis eros. Vestnunc nonummy</p> 
 

 
    <span> 
 
       Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy 
 
      </span> 
 
    <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque 
 
    montesque rhoncus quis eros. Vestnunc nonummy</p> 
 

 
    <span> 
 
       Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy 
 
      </span> 
 
    <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque 
 
    montesque rhoncus quis eros. Vestnunc nonummy</p> 
 

 
    <span> 
 
       Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy 
 
      </span> 
 
    <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque 
 
    montesque rhoncus quis eros. Vestnunc nonummy</p> 
 

 
    <span> 
 
       Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy 
 
      </span> 
 
</div> 
 
<div class="footer"> 
 
    <h1>Footer 
 
    <h1> 
 
</div>

我已經知道解決的辦法是擺脫100％的高度。 但我想知道的是爲什麼會發生這種情況。不應該100％的高度擴大它的高度，以適應父母？我的代碼是fiddle。

Answer 1

當然它會溢出。

什麼身高：100％是以父母的身高作爲身高。它不會佔用剩下的高度，而是需要父級的原始高度並將其設置爲高度。我認爲這是你想要的解釋。

Answer 2

使用最小高度爲HTML和內容，而不是height屬性，

<style> 
* { 
    margin: 0; 
    padding: 0; 
} 

body, 
html { 
    min-height: 100%; 
} 

.header, 
.footer { 
    height: 100px; 
    width: 100%; 
    background-color: red; 
    color: white; 
} 

.content { 
    width: 100%; 
    min-height: 100%; 
} 
</style> 

Answer 3

如果不是100％的高度擴大它的高度，以適應父？

是的，但溢出是因爲您爲父級設置了固定高度，因此無法增長。

我建議您不要使用height: 100%作爲主要容器，如html和body，因爲您希望它是靈活的。你也想爲這些容器必須至少在初始屏幕高度，所以用這個：

html, 
body { 
    min-height: 100vh; 
} 

有了這個，你將有至少100％的高度，如果集裝箱裏面有更多的內容，這將增加。但是對於子容器，您不能使用height: 100%，但由於通常情況下用例的容器高度等於屏幕百分比，因此您可以使用vh（視區高度單位）來實現此目的，而不用擔心高度的父容器。你可以像這樣創建一個類：

.full-height{ 
    height: 100vh; 
} 

Answer 4

剛刪除height:100%。

.content { 
    width: 100%; 
    height: 100%;<------Remove This---------- 
} 

全碼：

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body, html { 
 
    height: 100%; 
 
} 
 

 
.header, .footer { 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
}

<div class="header"> 
 
    <h1>Heading</h1> 
 
</div> 
 
<div class="content"> 
 
    <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque 
 
    montesque rhoncus quis eros. Vestnunc nonummy</p> 
 

 
    <span> 
 
       Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy 
 
      </span> 
 
    <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque 
 
    montesque rhoncus quis eros. Vestnunc nonummy</p> 
 

 
    <span> 
 
       Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy 
 
      </span> 
 
    <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque 
 
    montesque rhoncus quis eros. Vestnunc nonummy</p> 
 

 
    <span> 
 
       Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy 
 
      </span> 
 
    <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque 
 
    montesque rhoncus quis eros. Vestnunc nonummy</p> 
 

 
    <span> 
 
       Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy 
 
      </span> 
 
    <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque 
 
    montesque rhoncus quis eros. Vestnunc nonummy</p> 
 

 
    <span> 
 
       Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy 
 
      </span> 
 
</div> 
 
<div class="footer"> 
 
    <h1>Footer 
 
    <h1> 
 
</div>