相对 div 内绝对 div 的高度答案

【问题标题】：height of absolute div inside relative div相对 div 内绝对 div 的高度
【发布时间】：2013-03-22 07:01:46
【问题描述】：

我在相对 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/

【问题讨论】：

是什么让你觉得高度被忽略了？
你有一个 id="body" 的元素，但是你的 CSS 在 body tag 上有一个声明（body，而不是 #body）。这是故意的吗？
@ExplosionPills : 如果我改变它.. 没有任何改变。
@Faust：是的。你可以忽略 id="body"

标签： html css height positioning

【解决方案1】：

它是500px 高，但由于#wrap 上的overflow: hidden，大部分都被隐藏了。您需要删除它或使其足够大以包含#swipe。

【讨论】：

?什么？溢出隐藏是隐藏它的宽度..它对高度有什么影响？
overflow: hidden 在两个维度中隐藏它。如果您只想将其应用于宽度，请改用overflow-x: hidden。
真的！但什么都没有改变。请问你能在jsfiddle中做到吗？
嗯，这是奇怪。完全删除overflow 规则会使#swipe 可见，但即使明确设置overflow-y: visible 也不会。
再次，我建议让#wrap 足够高以容纳#swipe。

【解决方案2】：

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

【讨论】：

是的！同时我已经解决了，但你的回答是对的！