2011-05-19 427 views
0

我有一個外層divDIV溢出問題

position: relative; 
overflow: hidden; 
min-heigth: 450px; 

含有一個div

position: absolute; 
top: 10px; 
right: 10px; 

內的div比外div的最小heigth做大我看到外層div是不縮放到內部div的內容。關閉內部div的底部內容。

我如何定義外(或內)的div垂直擴展到內容(內部的div)

感謝

+1

不要絕對定位內部'div'。你可以做一個[jsFiddle測試用例](http://jsfiddle.net/)你的HTML/CSS? – thirtydot 2011-05-19 10:00:23

+0

可能與您的問題無關,但我想提及,如果這是從CSS直接剪切粘貼,那麼你有一個錯字:'min-heigth:450px;'應該是'min-height:450px ;'。這可能會導致其他問題。如果它不是一個直接的剪切粘貼然後忽略:) – icabod 2011-05-19 10:11:22

回答

1

@trascher;這是可能的,但你添加額外的標記,因爲當你給一個孩子div absolute position那麼它的父div不認爲它的高度。

入住這http://jsfiddle.net/sandeep/6UksD/1/

CSS:

#outer 
{ 
    position: relative; 
    min-height: 450px; 
    background:red; 
    margin:10px 0 0 10px; 
    width:200px; 
    overflow: hidden; 
} 
#inner 
{ 
    position:relative; 
    background:black; 
    height:600px; 
    width:100px; 
    margin:10px 0 0 10px; 
    float:left; 
} 
#abinner 
{ 
    position:absolute; 
    background:yellow; 
    height:100%; 
    width:100%; 
} 

HTML:

<div id="outer"> 
    <div id="inner"> 
     <div id="abinner"></div> 
    </div> 

</div> 
0

首先在你的外層div刪除min-height,然後,而不是絕對的放置內部的一個,在外部放置一個10px的填充。

#outerDiv { 
    position:relative; 
    overflow:hidden; 
    padding:10px; 
} 

#innerDiv { 
    /*Stuff*/ 
} 

向我們提供,雖然一個例子,這是很難看到的場景...

0

這裏的東西

<div id="outer"> 
    <div id="inner"></div> 
</div> 

#outer 
{ 
    width:300px; 
    height:auto; 

} 
#inner 
{ 
    width:200px; 
    height:300px; 

} 

我覺得這是你想要的東西:http://jsfiddle.net/anish/ZjQTt/

根據你的意願設置內容高度,外部div自動擴展。

0

絕對定位不會增加它的高度的父元素。

  1. 你要麼設置外層div的高度手動
  2. 你讓內div來有你增加使用javascript外div的高度距頂部/左10px的