Css 指定最小高度div以停止页脚div碰撞躯干div

我相信这很简单，但我很困惑

我在网页上有一个页脚，我所要做的就是确保它始终是从底部开始的固定高度，但为页面指定一个最小高度，这样它就不会在内容div上崩溃，而是滚动

有什么想法吗

看看这里

方盒
水平盒
.身高{
背景色：hsla（121,90%，48%，1）；
位置：固定；
高度：100px；
宽度：100px；
左：100px；
顶部：50px；
}
.身高2{
背景色：hsla（359,90%，48%，1）；
位置：固定；
高度：50px；
宽度：100%；
左：0px；
底部：60px；
}

以下是我用来锁定页脚的示例，希望对您有所帮助

.Footer 
{
    clear: both;
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: normal;
    background: #4b6c9e;
    color: #FFFFFF;
    font-weight: bold;
    position: absolute;
    bottom: 0; /* stick to bottom */
    margin: 0;
    padding: 8px 0px 0px 0px;
}

<div id="Footer" class="Footer ui-corner-all">
<span style="float: left; vertical-align: middle; padding: 5px">
</span>
<span id="clock" style="float: right; vertical-align: middle; padding: 5px">
</span>
</div>

.Footer
{
明确：两者皆有；
高度：30px；
宽度：100%；
文本对齐：居中；
线高：正常；
背景：#4b6c9e；
颜色：#FFFFFF；
字体大小：粗体；
位置：绝对位置；
底部：0；/*粘到底部*/
保证金：0；
填充：8px 0px 0px 0px；
}
你的意思是像这样吗

“内容崩溃”是什么意思如果你能详细说明一下，我相信我能帮上忙。
你为什么要使用
位置：fixed
？没有细节，亚当，我已经摆弄了几个小时了，这是我最后一个位置，仅此而已。有更好的建议吗？
position:fixed
将一个元素完全从文档流中删除，因此它周围的任何其他元素都“假装”它甚至不在那里（类似于
position:absolute
），这可能不是您想要的。谢谢，但不完全是这样，因为我仍然可以破坏上面的内容。我会继续找的
.Footer 
{
    clear: both;
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: normal;
    background: #4b6c9e;
    color: #FFFFFF;
    font-weight: bold;
    position: absolute;
    bottom: 0; /* stick to bottom */
    margin: 0;
    padding: 8px 0px 0px 0px;
}

<div id="Footer" class="Footer ui-corner-all">
<span style="float: left; vertical-align: middle; padding: 5px">
</span>
<span id="clock" style="float: right; vertical-align: middle; padding: 5px">
</span>
</div>

.body {
    position:relative;
    width:100%;
    min-height:100%;
    margin-bottom:-150px;
    padding-bottom:150px;
    background:#CCC;    
}

.footer {
    position:fixed;
    bottom:50px;
    height:100px;
    width: 100%;
    background:#C00;
}