具有自动高度的相对元素

Question

我想自动调高我的相对位置 Div 并且不想使用 "overflow: scroll/auto"。当 Childelement 需要 space..

时，我只想增加我的 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

只要您的内容使用 position: absolute，这将不起作用，因为绝对定位意味着元素从 DOM 和您的 #content div 将无法看到您的内容的正确高度。参见 explanation of Absolute vs Relative positioning。

然而，据我在你的例子中看到的，没有理由真正使用 position: absolute，所以你可以删除它：

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

<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 class="clear"></div>
    </div>
</div>

请注意，我在 clear your floats 末尾添加了一个 clear: both div，因此您的父元素具有正确的高度。

Answer 2

还有另一个选项可以为 .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>

具有自动高度的相对元素

Relative Element with auto-height

html

css

height

css-position