将overflow:auto添加到#page div。

jsFiddle example

同时检查一下折叠的页边距。

添加以下任一规则：

float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;

这是由collapsing margins引起的。请参阅有关此行为here的文章。
文章称：
W3C规范对折叠边距的定义如下：
在本规范中，“折叠边距”一词是指两个或多个框（可能彼此相邻或嵌套）的相邻边距（没有非空内容、填充或边框区域，或将它们隔开的间隙）合并形成单个边距。
对于父子元素也是如此。
所有的答案都包括一种可能的解决方案：
在其他情况下，元素的边距不会折叠：

• 浮动元件
• 绝对定位元素
• 内联块元素
• 溢出设置为可见以外的任何内容的元素（它们不会折叠其子元素的边距。）
• 清除的元素（它们不会将其顶部边距与其父块的底部边距一起折叠。）
• 根元素

问题是父母没有考虑孩子的身高。添加display:inline-block;为我做到了。

全CSS

#page {
    margin:0;
    background:#FF9;
    display:inline-block;
    width:100%;
}

See Fiddle

只需将border-top: 1px solid transparent;添加到#page元素。
来自w3.org
两个边距相邻，当且仅当：

• 没有线框，没有间隙，没有填充，也没有边框将它们分开

添加以下规则：

overflow: hidden;

这是由折叠页边距引起的。请参阅有关此行为的文章here。
文章称：
如果一个父元素没有任何顶部填充，或者顶部边距比它的第一个子元素少，那么元素会以一种方式呈现，使父元素看起来像有子元素的边距。所以这可能发生在页面上任何满足这些条件的地方，但它往往在页面的顶部最明显。

其他答案中的解决方案对我不起作用。透明边框，inline-block等，都引起了其他问题。相反，我在我的祖先元素中添加了以下css：

parent::after{
  content: "";
  display: inline-block;
  clear: both;
}

根据您的情况，这可能会导致其自身的问题，因为它在最后一个子元素之后添加了额外的空间。

我在为XenForo 2.1制作样式时的方法，但它应该对您有用：（请将LESS变量替换为实际值。此外，次要边距的绝对值应与前后伪元素的高度相同。）

// The following two lines are to avoid top & bottom fieldset borders run out of the block body.
// (Do not tweak the CSS overflow settings, otherwise the editor menu won't be float above the block border.)
&:before {content: "\a0"; display: block; width: auto; margin-bottom: floor(-1 * @xf-lineHeightDefault * @xf-fontSizeSmall - @xf-borderSizeMinorFeature);}
&:after {content: "\a0"; display: block; width: auto; margin-top: floor(-1 * @xf-lineHeightDefault * @xf-fontSizeSmall - @xf-borderSizeMinorFeature);}