html - 相対div内の絶対divの高さ

Question

相対div内に絶対divがあり、固定次元にしたい。私の問題は、高さが無視されることです。

これは私のhtml構造です：

<div id="wrap">
    <div>
        <h1>test</h1>
    </div>
    <div id="swipe">
        <br/>
    </div>
</div>

これが私のCSSです：

body {
    background-color: #7ECEFD;

    margin: 0;
    padding: 0;
}

#wrap {
    width: 100%;
    margin: auto;
    overflow: hidden;
    position: relative;
}

#swipe {
    background-color: white;    
    position: absolute;
    top:0;
    left:10px;
    width:100%;
    height: 500px; 
}

なぜ？どうすればcssで解決できますか？他のトリック（jquery）？

http://jsfiddle.net/nkint/XQzJf/

Answer 1

500px高いですが、オンのためにほとんどが非表示になっていoverflow: hiddenます#wrap。それを削除するか、を含むのに十分な大きさにする必要があります#swipe。

Answer 2

html, body, #wrap {
   height: 100%;
}