具有自动高度的相对元素

时间：2015-03-02 10:01:23

标签： html css height css-position

我想自动高我的相对定位Div并且不想使用“overflow：scroll / auto”。当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强制自动需要的高度？

最好的问候。

2 个答案:

答案 0 :(得分：0)

只要您的内容使用position: absolute，这将无效，因为绝对定位意味着元素已从DOM的正常流程中删除，而您的#content div将无法看到正确的内容高度。请参阅explanation of Absolute vs Relative positioning。

但是，就我在您的示例中所看到的，没有理由真正使用position: absolute，因此您可以删除它：

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

答案 1 :(得分：0)

还有另一种方法可以为.table

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

并移除height

的.content

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>

相关问题
最新问题