如何使用css 100％高度

Question

尝试＃3。

使用css，严格的doctype ，有人可以绘制4个div框来满足这些要求。

1. 包装或最外面的div将在高度上缩放。这意味着它可以是任何高度。
2. 中间div应始终为100％高以匹配外/父div（我列表中的＃1）
3. 下一个div应位于位于内，位于div＃2的顶部
4. 最后一个div应位于位于内，位于div＃2的底部

注意： 如果你使用绝对定位，你会将div 3和4放在div＃1之外，这将无效。关键是要将div 3和4 保持在 div＃2

之内

Answer 1

<div id="wrapper">
 <div id="middle">
  <div id="top">top</div>
  <div id="bottom">bottom</div>
 </div>
</div>

#wrapper { height: 200px;  position: relative;  }
#middle { height: 100%;  }
#bottom { position: absolute; bottom: 0; }

它应该适用于你给#wrapper的任何高度。

你可以在这里玩它：http://jsfiddle.net/dmBsa/