頁腳上升與父級高度100％

Question

我在這裏找到其他職位，但他們都沒有解釋這個問題。以下是我正在談論的一個基本示例：https://jsfiddle.net/p1e5krn6/。

HTML

 <nav> 
     <ul> 
      <li>About</li> 
     </ul> 
    </nav> 
</header> 

<div id="content"> 
    Lorem ipsum dolor sit amet. 
    <div id="one">asdasd</div> 
    <div id="two">asdasdasd</div> 
</div> 

<footer>footer</footer> 
</body> 

CSS HTML，身體{ 高度：100％; background-color：yellow; }

header,footer{ background:blue; } 

header { 
    width: 100%; 
    height: 100%; 
} 

header nav ul li { 
    display: inline-block; 
    padding: 0 30px 0 0; 
} 

#content { 
    background-color: pink; 
    width: 60%; 
    height:100%; 
    margin: 0 auto; 
} 
#one, #two { 
    height:100%; 
} 

footer { 
    width: 100%; 
} 

我真的想知道的是爲什麼頁腳上升這樣。我知道如何解決這個問題，我可以將腳註放入內容div中，但這在語義上是錯誤的。我想要的不是一個解決方案，而是一個能夠解釋該頁腳行爲的理由。

Answer 1

發生這種情況的原因是您已將100% height分配給div #one和#two以及100％高度的內容。從邏輯上講，如果它們只是內容的一部分，那麼爲什麼還要給出完整的高度。從這兩個div移除該屬性解決了這個問題。看到小提琴： 「https://jsfiddle.net/p1e5krn6/1/」

刪除以下樣式：

#one, #two{ 
    height:100%; 
} 

Answer 2

嘗試他的一個demo

*{ 
float:left; 
    }