标题和导航栏 - CSS问题（差距）

Question

我无法为我的网页制作<h1>标题链接，以填充我网页中的整个<header>标记。下面似乎有一个空白，我不知道如何解决它。

我的导航栏也存在类似的问题，随着浏览器的大小不断扩大。

尝试将鼠标悬停在此JSFiddle中的标题和导航栏上，看看我的意思：http://jsfiddle.net/8qLkc/

有人可以帮我解决这个问题。

Answer 1

只需使用非常简单的CSS代码：

header h1 {
    height:100%;
}

这会将<h1>扩展为其父级的完整高度，在这种情况下为<header>。

Demo

要在调整窗口大小时解决导航折叠问题，请使用以下命令：

nav {
    white-space:nowrap;
}
#mainContent {
    clear:both;
}

Demo

这可以防止导航链接在文本超出容器宽度时折叠，并确保主要内容在显示浮动元素之前获取其空间。