Question

我需要一个孩子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一样高

Answer 1

设置父div高度（以像素为单位）（对于ex height：100px）并将child设置为100％（height：100％）。子项仅完全占用父div宽度

Answer 2

身高从来没有多少运气：100％;即使按照规则玩。 .balloonarrow做什么？如果您只是想将图形捕捉到div的底部，您可以尝试position：absolute;和底部：0px;，只要#deelnemersballoon设置为position：relative;。

如果您只想制作.balloonarrow包含的实体/图案视觉效果，最好制作拉伸图像：创建3px或4px高的图像，使其成为#deelnemersballoon的背景，然后设置它重复 - y。快速而肮脏的方式来制作100％高度的侧边栏。

希望这会有所帮助，如果没有看到你的CSS，就说不出更多。

Answer 3

如果儿童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/

Answer 4

尝试添加位置：相对于父div。那么子div上的100％应该引用父div。一般来说，100％的高度将寻找最近的父元素，并在其上设置一个位置 - 如果找不到它，它最终将找到body标签并使用它。

子div应该与父div一样高

4 个答案: