我有一個外層divDIV溢出問題
position: relative;
overflow: hidden;
min-heigth: 450px;
含有一個div
position: absolute;
top: 10px;
right: 10px;
內的div比外div的最小heigth做大我看到外層div是不縮放到內部div的內容。關閉內部div的底部內容。
我如何定義外(或內)的div垂直擴展到內容(內部的div)
感謝
我有一個外層divDIV溢出問題
position: relative;
overflow: hidden;
min-heigth: 450px;
含有一個div
position: absolute;
top: 10px;
right: 10px;
內的div比外div的最小heigth做大我看到外層div是不縮放到內部div的內容。關閉內部div的底部內容。
我如何定義外(或內)的div垂直擴展到內容(內部的div)
感謝
@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>
首先在你的外層div刪除min-height
,然後,而不是絕對的放置內部的一個,在外部放置一個10px的填充。
#outerDiv {
position:relative;
overflow:hidden;
padding:10px;
}
#innerDiv {
/*Stuff*/
}
向我們提供,雖然一個例子,這是很難看到的場景...
這裏的東西
<div id="outer">
<div id="inner"></div>
</div>
#outer
{
width:300px;
height:auto;
}
#inner
{
width:200px;
height:300px;
}
我覺得這是你想要的東西:http://jsfiddle.net/anish/ZjQTt/
根據你的意願設置內容高度,外部div自動擴展。
絕對定位不會增加它的高度的父元素。
不要絕對定位內部'div'。你可以做一個[jsFiddle測試用例](http://jsfiddle.net/)你的HTML/CSS? – thirtydot 2011-05-19 10:00:23
可能與您的問題無關,但我想提及,如果這是從CSS直接剪切粘貼,那麼你有一個錯字:'min-heigth:450px;'應該是'min-height:450px ;'。這可能會導致其他問題。如果它不是一個直接的剪切粘貼然後忽略:) – icabod 2011-05-19 10:11:22