Css 当内容高度大于最小高度时

我有页眉和页脚。在中间一个恒定的左、右部分，在中间我的内容部分。内容部分的高度正在更改。 当内容部分的高度大于最小高度时，我尝试将页脚放置在内容部分下方，但未成功

这是我尝试的代码：

#页面{
宽度：800px；
边框：1px纯黑；
保证金：5px自动；
背景：#e2ebed；
}
#标题{
高度：100px；
背景：黄色；
}
#居中{
最小高度：300px；
背景：浅蓝色；
}
#左{
浮动：左；
宽度：150px；
背景：海蓝宝石；
}
#内容{
浮动：左；
宽度：500px；
//最小高度：300px；
背景：矢车菊蓝；
}
#对{
浮动：左；
宽度：150px；
背景：海蓝宝石；
}
#页脚{
高度：50px；
背景：红色；
}
标题
左边
内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

赖特
页脚

您需要清除浮动，因此我添加了此规则

#center:after{
  content: '';
  display: table;
  clear: both;
}

示例代码段

#第页{
宽度：800px；
边框：1px纯黑；
保证金：5px自动；
背景：#e2ebed；
}
#标题{
高度：100px；
背景：黄色；
}
#居中{
最小高度：300px；
背景：浅蓝色；
}
#中心：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
#左{
浮动：左；
宽度：150px；
背景：海蓝宝石；
}
#内容{
浮动：左；
宽度：500px；
最小高度：300px；
背景：矢车菊蓝；
}
#对{
浮动：左；
宽度：150px；
背景：海蓝宝石；
}
#页脚{
高度：50px；
背景：红色；
}

标题
左边
内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

赖特
页脚

未关闭

#页面

divproperly@swaenie不客气，如果我的回答解决了你的问题，也请接受。是的，你的回答解决了我的问题。但是对不起，我怎么接受你的答案呢？@swaenie在我答案的左上方是一个复选标记，你点击它就会变成绿色，表明它是被接受的答案。