为什么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>