子div应该和父div一样高。

Question

我需要一个子div的高度与其父div相同，但我不知道父div的高度。它可能会改变。 设置“height: 100％”无效，因为div将占用整个页面的高度。

以下是div的布局：

<div id="deelnemersballoon">
    <div class="balloonarrow"></div>

    <div class="balloonborder">

        <div class="ballooncontent">
            <div id="aantaldeelnemers">1</div>
            <div id="deelnemertekst">deelnemer werd toegevoegd.</div>
            <div class="clear">
                <button>Add something</button>
            </div>
        </div>

    </div>

</div>

.balloonarrow应该与#deelnemersballoon的高度一致

- Jelle De Loecker

---

请展示你的CSS。听起来“balloonarrow”被绝对/相对/任何方式定位，其他一些元素也可能是如此——这很重要，以便找到解决方案。 - oezi

Answer 1

如果子div在其前面的标记中有内容，则它不会占用父元素的100％：

Html：

<div id='parent'>Parent (Mark up before child)<div id='child'>Child</div></div>

css：

   #parent {background:blue; height:500px; color:white}
    #child {background:red; height:100%}

您可以在这里找到一个可用的示例。 （从＃parent div中删除文本将使子元素填充100％）

http://jsfiddle.net/wcprA/2/

如果您在100％子元素之后也有标记，就像这里看到的那样，同样的事情也适用。

http://jsfiddle.net/wcprA/5/

- Blowsie

---

你错了，子元素确实占用了父元素的高度，只是被推下去了。实际上，现在它已经溢出了父元素。 - david

确实它正在溢出，但它复制了手头问题的一个问题，并证明上面的代码不应该在页面高度100％呈现div，我想用户CSS的示例会很好。 - Blowsie

Answer 2

我在使用height: 100%时从来没有什么好运气，即使按规则操作。.balloonarrow是做什么用的？如果你只是想将图形固定在div底部，可以尝试使用position: absolute;和bottom: 0px;，只要#deelnemersballoon设置为position: relative;。

如果你只是想制作一个由.balloonarrow包含的实心/图案视觉效果，最好制作一个可伸缩的图像：创建一个3px或4px高的图像，将其设置为#deelnemersballoon的背景，并将其设置为repeat-y。快速而简单的方法来制作一个100%高度的侧边栏。

希望这可以帮助到你，如果没有看到你的css，就不能告诉更多了。

- CodeMoose

Answer 3

将父级 div 的高度设置为像素（例如 height:100px），并将子元素设置为 100%（height:100%）。子元素仅占用父级 div 的宽度。

- ArK

Answer 4

尝试在父div中添加position:relative。然后，子div上的100％应该引用父div。一般情况下，100％的高度将寻找最近的具有设置位置的父元素 - 如果它找不到任何元素，它最终会找到body标签并使用它。

- James Gaunt