具有自动高度的相对元素

Question

我想自动高我的相对定位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强制自动所需的高度？

最好的祝福。

Answer 1

只要您的内容使用position: absolute ，这将无效，因为绝对定位意味着元素将从DOM的正常流中移除，并且您的#content div将无法查看内容的正确高度。 请参阅Absolute vs Relative定位的说明 。

但是，就我在你的例子中看到的那样，没有理由真正使用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: 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>