在所有其他东西之后放置一个div

Question

我有一个html结构，如下所示：

我正在尝试将突出显示的div放在div#content

之后

一些背景知识：

我有以下样式规则：

html,body{
position:relative;
top:0;
height:100%;
left:0;
width:100%;
}

div#content内还有两个节点，即div#node-1＆amp; div#node-2我对这两个元素都有height:100%。这个想法 是将这些部门用作网站中可以访问的页面 向下滚动。

在应用样式规则时，我会看到以下页面。

我想把最后突出显示的div放在最后一个位置，即在所有div#content之后（想法是稍后将其更改为页脚）但目前它重叠div#content（由箭头显示） ）。它出现在div#content div#node-2和{ div#content div#node-1。 我不知道为什么会这样。任何建议都表示赞赏。

修改

请参阅示例jsfiddle here。