html - 具有自动高度的相对元素

Question

我想自动调高相对定位的 Div，不想使用“溢出:滚动/自动”。我只想在 Childelement 需要空间时增加我的 Div 的高度..

#content {
    position: relative;
    background: red;
    z-index: 1;
    right: 0px;
    width: 100%;
    color: rgba(58, 58, 58,1);
    height: 560px;
}
#content p, #banner p, #content a{
    margin: 0px;
    padding: 5px;
}
.table {
    position: absolute;
    left: 5%;
    right: 5%;
    display: block;
}
.tleft, .tmiddle, .tright {
    width: calc( 100% / 3 );
    float:left;
    position: relative;
}

<div id="content">
    <div class="table">
        <div class="tleft">
            <h1><img src="images/icons/Unbenannt.png" alt="" class="nolb" />Überschrift1</h1>
        </div>
        <div class="tmiddle">
            <h1><img src="images/icons/Unbenannt.png" alt="" class="nolb" />Überschrift2</h1>
        </div>
        <div class="tright">
            <h1><img src="images/icons/Unbenannt.png" alt="" class="nolb" />Überschrift3</h1>
            <p>Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            </p>
			
        </div>
    </div>
</div>

如何为相对定位的 Div 自动强制需要高度？

最好的问候。

Answer 1

还有另一个选项可以为 .table 执行此更新 css

.table {
    position: relative;
    display: block;
    overflow:hidden;
}

并删除 .content 的 height

jsfiddle:http://jsfiddle.net/d5jdu9md/

#content {
    position: relative;
    background: red;
    z-index: 1;
    right: 0px;
    width: 100%;
    color: rgba(58, 58, 58,1);
    
}
#content p, #banner p, #content a{
    margin: 0px;
    padding: 5px;
}
.table {
    position: relative;
    display: block;
    overflow:hidden;
}
.tleft, .tmiddle, .tright {
    width: calc( 100% / 3 );
    float:left;
    position: relative;
}

<div id="content">
    <div class="table">
        <div class="tleft">
            <h1><img src="images/icons/Unbenannt.png" alt="" class="nolb" />Überschrift1</h1>
        </div>
        <div class="tmiddle">
            <h1><img src="images/icons/Unbenannt.png" alt="" class="nolb" />Überschrift2</h1>
        </div>
        <div class="tright">
            <h1><img src="images/icons/Unbenannt.png" alt="" class="nolb" />Überschrift3</h1>
            <p>Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.Das ist ein sehr langer Text umzu testen, wie das komische geteilte Div darauf reagiert und wie es danach aussieht.
            </p>
			
        </div>
    </div>
</div>