html - 当内联代码块不再适合时，如何使div与 child 一起成长

所以我有这个密码

        <div class="contentBlock">
            <div id="profileBlock">
                <div id="imageContainer"></div>
                <div id="textBlock">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
        </div>

css

.contentBlock
{
    display: inline-block;
    width: 100%;
    height: 100%;
}

#profileBlock
{
    text-align: center;
    margin: 25px 25px;
    height: 350px;
}

#textBlock
{
    width: 50%;
    display: inline-block;
    margin: 0px 25px;
}

#imageContainer
{
    vertical-align: top;
    display: inline-block;
    width: 250px;
    height: 300px;
    background-image: url('http://placehold.it/250x300');
    background-repeat: no-repeat;
}

https://jsfiddle.net/h21f2882/
这基本上是我的投资组合网站的一部分。我正在尝试将占位符图片放置在文本旁边。不过，当我调整浏览器大小时，文本会显示在图片下方，这不是我试图解决的问题。但问题是容器无法缩放。允许整个textBlockdiv溢出它的边界。
现在我有两个问题：
如果我要做一个媒体查询，我将把显示改回块并将profileBlock调整为X像素。这是不是不好的做法，因为我会用一个神奇的数字来设置高度？
发生此事件后，如何更改此容器的高度以适合其子容器？
向前谢谢
马克斯·比克曼

最佳答案

你就快到了。您只需要添加两行代码：
html, body { height: 100%; }
由于在.contentBlock中使用的是百分比高度，因此需要在父元素上指定一个高度，在本例中为body和html。没有这段代码，height: 100%中的.contentBlock就什么也做不了。
有关在CSS中使用百分比高度的解释，请参见我的答案：
Working with the CSS height property and percentage values
#profileBlock { min-height: 350px; }
您在图像和文本的容器上设置了固定高度（#profileBlock { height: 350px; }）。这样可以锁定高度。相反，让它成为minimum height。当内容增长时，它将扩展。
并考虑将amin-height设置为on.contentBlock。然后它将扩展以适应.profileBlock。
演示：https://jsfiddle.net/h21f2882/2/