CSS高度自動不相對DIV

Question

工作，我有這樣的代碼顯示absolute div到relative div。

HTML：

<section> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="relative"> 
        <div class="absolute">Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.</div> 

       </div> 
      </div> 
      <div class="col-md-12"> 
       normal text added 
      </div>  
     </div> 
    </div> 
</section> 

CSS：

.relative { 
    position: relative; 
    height:auto; 
    background-color:#e1e1e1; 
} 
.absolute { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background-color: white; 
    width: auto; 
    background-color:#f5f5f5; 
    margin:0 15px; 
} 

在現實中，當我設置爲height:auto這relative divdiv沒有顯示。如果我設置任何height值，即：height:150px;相對div它的工作原理和顯示正確。我該如何解決這個問題？

演示here

Answer 1

添加溢出：隱藏;最小高度：100像素;

.relative { 
    position: relative; 
    height:auto; 
    overflow :hidden; 
    min-height:100px; 
    background-color:#e1e1e1; 
} 

Answer 2

你不能用CSS做到這一點，需要設置你與position:relative外層div高度爲你的內在position:absolute顯現。

這是因爲當您將<div>設置爲position：absolute時，外部容器不再具有其寬度和高度的概念，並且不會容納它佔用的空間。

Answer 3

這裏的竅門

CSS

.relative { 
    position: relative; 
    overflow :hidden; 
    min-height:100px; 
    background-color:#e1e1e1; 
} 
.absolute { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background-color: white; 
    width: auto; 
    background-color:#f5f5f5; 
    margin:0 15px; 
     overflow: auto; 
    height: 100px; 
} 

DEMO

設置相對高度和絕對高度