相对定位元素内绝对定位元素的高度问题

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/

- nkint

---

你为什么认为高度被忽略了？ - Explosion Pills

你有一个id为"body"的元素，但是你的CSS在body 标签上声明了(body而不是#body)。这是有意为之吗？ - Faust

@ExplosionPills：如果我改变它...什么也不会改变。 - nkint

@Faust：是的，你可以忽略id="body"。 - nkint

Answer 1

它的高度是500px，但由于#wrap上的overflow: hidden，大部分内容被隐藏了。您需要移除它或使其足够大以容纳#swipe。

- Mark Parnell

---

什么？overflow hidden 是用来隐藏宽度的...那它会影响高度吗？ - nkint

overflow: hidden 会在两个方向上隐藏内容。如果你只想在宽度上应用，那么可以使用 overflow-x: hidden。 - Mark Parnell

true！但是什么也没有改变。你能在jsfiddle上做到吗？ - nkint

嗯，这确实很奇怪。完全删除overflow规则会使#swipe可见，但即使明确设置overflow-y: visible也不行。 - Mark Parnell

再次建议将#wrap的高度调整到足以容纳#swipe。 - Mark Parnell

Answer 2

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

- Helstein

---

太好了！我在此期间已经解决了，但你的答案是正确的！ - nkint