CSS拉伸包装器垂直封装内容

Question

我正在尝试构建导航，我希望该栏与链接的高度相同。

http://jsfiddle.net/520sd51p/

根据徽标的大小，如果我取出徽标，则栏会消失。

这可以不设置静态高度吗？ （我想这样做，以便按钮完全垂直居中并垂直填充整个条。）

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会恢复您之后的行为。