Question

所以我有这段代码

        <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/

它基本上是我投资组合网站的一部分。我试图将占位符图片放在文本旁边。但是，当我调整浏览器大小时，文本会出现在图片下方，这不是我试图解决的问题。然而问题是容器不能扩展。允许整个textBlock div溢出它的边界。

现在我有两个问题：

如果我要进行媒体查询，我会将显示更改回块并将profileBlock调整为X像素。这会是不好的做法，因为我会用一个幻数来设定高度吗？
在发生这种情况后，我怎样才能更改此容器的高度以适合它的孩子？

谢谢你 Max Beekmans

Answer 1

你快到了。您只需添加两行代码：

<强> 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。然后，当内容增长时，它会扩展。

并考虑在min-height上设置.contentBlock。然后它将展开以适应.profileBlock。

DEMO：https://jsfiddle.net/h21f2882/2/

当内嵌块不再适合时，如何让div与其子女一起成长

1 个答案: