具有自动高度的相对元素(Relative Element with auto

我不想使用“overflow：scroll / auto”。 我只想在子元素需要空间时增加高度。

#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所需的高度？ 
 
 最好的问候。 
I want to auto-high my relative positioned Div and don't want to use "overflow: scroll/auto". I just want to increase my Div's height when the Childelement needs the space..
 
 
 
  
  
#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> 
  
 
 
How can I force automatically needed height for the relative positioned Div?
 
Best regards.
                
最满意答案
                
                    
                        
 还有另一种方法可以为.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> 
  
 
There is another option to do this update css for .table
 
.table {
    position: relative;
    display: block;
    overflow:hidden;
}
 
and remove height of .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>