Html 使容器的高度适合其内容物

所以我在我的网格系统中使用bootstrap4，我有两列在下面。我的问题是，使用

height:100%

时，容器不会随着内容的增长而增长。 使用

overflow:auto

时，它在某种程度上起作用，因为列的内容不再重叠，但它提供了一个滚动条，最好是我希望容器根据内容改变高度

HTML

---

无法使用您提供的代码复制您的问题

但是，您可以使用

minheight:100%

而不是

height

，以确保如果内容足够长，需要超过100%

“最小高度”属性用于设置给定图元的最小高度。它可以防止“高度”特性的使用值小于为“最小高度”指定的值。“最小高度”的值将覆盖“最大高度”和“高度”

---

如果我理解，您似乎想要“可变宽度内容”，应该使用：col-{breakpoint}-auto

在一支笔中快速测试，改变它似乎可以解决问题

<div class="col-md-auto about-para-wrapper">

编辑：实际上，这解决了标题文本在侧面溢出的问题，以及当屏幕大小改变时一些奇怪的宽度变化

---

你的重叠问题，我只能在给这个部分一个px的高度大小时重新创建它。这在您的代码中没有出现。

我不明白，它看起来很好。你能指出到底是什么问题吗？

.vp-divider {
    background-color:#FFA366 !important;
    border:none;
    margin:0;
    height:1vh;
}

.about {
    height:100%;
    background-image: url("../images/tile.png");
    background-position: center center;
    background-repeat: repeat;
}

.about-photo {
    border: 4px solid #fff;
    -webkit-box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.75);
}

.about-heading {
    font-family: 'Josefin Slab', serif;
    font-size: 6em;
}

.about-lead {
    font-family:'Roboto';
    font-size:2em;
    font-weight:300;
}

.about-para-wrapper {
    padding: 20 20 20 20;
    background-color:#EFDFCB;
    border:3px solid #fff;
    margin-top: 20;
    margin-bottom: 20;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(135,135,135,1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(135,135,135,1);
    box-shadow: 0px 0px 9px 1px rgba(135,135,135,1);
}

.about-wrapper-size {
    width:100%;
}

@media (min-width: 1661px) {
    .about-wrapper-size {
        width: 75%;
    }

    .about-para-wrapper {
        margin-left: 20;
    }
}

<div class="col-md-auto about-para-wrapper">