我发现，设置两列显示:table-cell;代替float: left;工作得很好。

这是设计师一直在处理的一个令人沮丧的问题。诀窍是你需要在CSS中的BODY和HTML上设置高度为100%。

html,body {
    height:100%;
}

这段看似毫无意义的代码是为了向浏览器定义100%的含义。的确令人沮丧，但这是最简单的方法。

如果你不介意导航div在意外的短内容div事件中被剪辑，至少有一个简单的方法:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

除此之外，还有假柱技术。

(在另一个回答中提到了Dmity的Less代码)我猜这是某种“伪代码”?

据我所知，尝试使用人造柱技术应该可以做到这一点。

http://www.alistapart.com/articles/fauxcolumns/

希望这对你有所帮助。

你可以把display: flex到div#主，align-self: stretch到div#导航。

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

// CSS file
#main {
  display: flex;
}

#navigation {
  align-self: stretch;
}    

高度:< % >将只工作，如果你所有的父节点都具有指定的百分比高度和固定的高度(像素，ems等)在顶层。这样，高度就会随你的喜好而下降。

您可以像前面提到的@Travis那样为html和body元素指定100%，以使页面高度向下级联到节点。