CSS拉伸包裝垂直封裝內容

Question

我試圖建立一個導航，我想酒吧是與鏈接高度相同。

http://jsfiddle.net/520sd51p/

這顯然大小的基礎上，標誌，如果我拿出的標誌，欄消失。

這可能沒有設置靜態高度嗎？ （我想這樣做，這樣的按鈕是完全垂直居中和vertcally填滿整個酒吧。）

HTML

<header><!-- header --> 
    <a id="logo" href="/">Logo</a> 
    <nav><!-- navigation --> 
     <ul> 
      <li><a href="/">Home</a></li> 
      <li><a href="/gallery">Gallery</a></li> 
      <li><a href="/contact">Contact</a></li> 
      <li><a href="/blog">Blog</a></li> 
     </ul> 
    </nav> 

</header> 

CSS

html,body { height:100%; } 

header { 
    background-color: red; 
} 

header a { 
    color: #fff; 
    text-decoration: none; 
} 

header ul { 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
} 

header ul a{ 
    font-size: 1.5em; 
    display: block; 
} 

Answer 1

添加overflow:auto到你的頭：

header { 
    background-color: red; 
    overflow:auto; 
} 

jsFiddle example

當您浮動子元素時，它們將從文檔流中移除，並且父項會有效地崩潰。添加overflow:auto可以恢復您之後的行爲。