2015-03-02 91 views
0

我想自动加高我的相对定位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> 
 
\t \t \t 
 
     </div> 
 
    </div> 
 
</div>

如何我强迫自动需要高度定位的div相对?

此致敬礼。

+0

所以当div越大,div的内容应该越大? – bbvanee 2015-03-02 10:18:15

+0

不知道你为什么要这样做,但你可以完全删除高度属性,而是应用“最大高度”和相同的“最小高度”来控制div中允许的上限和下限增长。这样你的内容应该在这些值之间自动增长;也就是说,如果您在上面的“内容”代码中的继承不覆盖这一点。 – BMac 2015-03-02 10:27:45

回答

0

还有另一种选择做这个更新的CSS。表

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

和删除的.contentheight

的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> 
 
\t \t \t 
 
     </div> 
 
    </div> 
 
</div>

+0

非常感谢!解决了它! – 2015-03-02 10:45:22

+0

@JanikH这个答案实际上和我的一样,并且删除了'position:absolute;'。 – 2015-03-02 10:45:49

+0

@DarkAshelin不完全。它将绝对变为相对,这在定位时不是“无价值”。 – 2015-03-02 12:04:23

0

只要您的内容使用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> 
 
\t \t \t 
 
     </div> 
 
     <div class="clear"></div> 
 
    </div> 
 
</div>

请注意,我添加了一个clear: both div到clear your floats,所以你的父元素有正确的高度。

+0

嘿, 谢谢,但它只是一个片段。在我的完整网站中,绝对的位置。否则它看起来不可靠 – 2015-03-02 10:39:24

+0

@JanikH你使用的绝对位置是什么?我认为它可以解决没有它。我相信你正在以错误的方式使用'position:absolute'。 – 2015-03-02 10:40:52