CSS拉伸包裝垂直封裝內容

我試圖建立一個導航，我想酒吧是與鏈接高度相同。CSS拉伸包裝垂直封裝內容

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

這可能沒有設置靜態高度嗎？（我想這樣做，這樣的按鈕是完全垂直居中和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; 
}

來源

2014-09-03 stackers

可能的重複[爲什麼我的「容器」div不包含我的浮動元素？]（http://stackoverflow.com/questions/1758484/why-is-my-container-div-not-containing-my-浮動元素） – CBroe 2014-09-03 17:02:26

查找清理浮游物。很多關於這個話題的東西。 – DRD 2014-09-03 17:09:27

添加overflow:auto到你的頭：

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

jsFiddle example

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

來源

2014-09-03 17:17:32 j08691

哦，哇，我不知道，我認爲這與列表或導航元素有關。非常感謝！ – stackers 2014-09-03 21:20:16

CSS拉伸包裝垂直封裝內容

回答

相關問題