元素不随内容扩展

Question

基本上，我试图让我的网页看起来像这样：

---

顶层是固定高度，底层是固定高度，但中间白色层应该是可变高度，具体取决于#middle_wrap层内的内容量。

不幸的是，这是我的结果：

---

---

我能听到你的笑声，停下来!!正如您将通过我的代码看到的那样，我通过将#middle_sub_layer的高度设置为1500px（这是我的内容的高度）来逃避它，但这根本不是理想的！它确实需要流畅，以适应所有内容，无论高度如何。

#top_sub_layer { height:200px; text-align:center; z-index:1; position:relative; }
#middle_sub_layer { height:1500px; background:#FFF; padding:25px; z-index:1; position:relative; }
#bottom_sub_layer { height:280px; z-index:1; padding:20px; position:relative; }
#middle_wrap { width:960px; margin:0 auto; top:15px; position:relative; z-index:1; }

如何更改此样式块以获得我想要的结果？我尝试了height:auto，我尝试了height:100%，并在所有图层上尝试了z-index:1。我显然对CSS布局很陌生。

Answer 1

如果您想要一个具有设定高度的页眉，一个具有设定高度的页脚和一个内容可变的内容，请执行以下操作：JSFiddle Example。如果这不是您正在寻找的，请告诉我。

Answer 2

试试这个

#top_sub_layer { height:200px; text-align:center; }
#middle_sub_layer {background:#FFF; padding:25px;}
#bottom_sub_layer { height:280px; padding:20px; }
#middle_wrap { width:960px; margin:0 auto; }