調整有物業的div的高度「顯示：表單元格」

我試圖垂直居中另一格內一個div，不管這兩個div的調整有物業的div的高度「顯示：表單元格」

我這樣做大小：

<div id='outer_div'> 
    <div id='inner_div'></div> 
</div>

的CSS：

#outer_div { 
    display: table-row; 
    height: 200px; 
    width: 200px 
} 

#inner_div { 
    display: table-cell; 
    vertical-align: middle; 
    height: 500px; 
    width: 500px 
}

我把更大尺寸的目的在內的div。會發生什麼，即使我把寬度1000px，由於outer_div的寬度（這是我想要的），inner_div的寬度被限制在200px。

但是，對於高度來說，它不是上限，我希望它被限制在外部div的高度。

我想要的是inner_div保持與outer_div一樣的大小，不管我在CSS中給outer_div什麼樣的高度。 我基本上希望它的尺寸與其父母相同。

編輯：

我只能把文本中的那些div的。假設我有一個200px*200px（它有display: table-row）的外部div，而內部div由CSS定義爲500px*500px，它裏面有虛擬文本。我預期的結果是讓內部股利縮小到200px*200px。它被成功地縮小了寬度的外部div，但不是高度。我想要的是讓它在高度上收縮（因此內部div會自動調整以防我改變外部div的高度）

我該如何去做？

來源

2012-11-10 eric01

會發生什麼？內部滾動條？隱藏溢出？縮小比例？ –

我希望innerdiv保持在200px×200px，不管我在CSS中給它多高。我基本上希望它和它的父母一樣大小。謝謝 – eric01

我不能爲任何人說話，但你的問題對我來說毫無意義。如果你想讓內部div與它的父母大小相同，那麼試圖將其居中呢？ – Hubro

這會幫你嗎？不過，不知道你的侷限性。

HTML：

<div id="container"> 
    <div id='outer_div'> 
     <div id='inner_div'></div> 
    </div> 
</div>

CSS：

#container 
{ 
    display: block; 
    height: 200px; 
    width: 200px; 
    /* overflow: scroll; */ 
    overflow: hidden; 
    background-color: green; 
} 

#outer_div { 
    display: table-row; 
    height: 200px; 
    width: 200px; 
    background-color: purple; 
} 

#inner_div { 
    display: table-cell; 
    height: 500px; 
    width: 500px; 
    background-color: yellow; 
}

View in JSBin

編輯：我不知道你是否可以更改#inner_div或沒有，但如果你這樣做 - 然後只是簡單地刪除其規則中的height ...

來源

2012-11-10 01:39:37 Nixter

嗨，謝謝你的迴應。我想要做的是製作一個名爲inner_div的類，我可以將其應用於各種高度的div。所以我會爲這個類選擇一個2000px的高度，以便所有擁有該類的div都被父div所封裝。 – eric01

必須將'＃outer_div'作爲'table-row'嗎？如果你說了一些像'#outer_div {display：block; height：200px; width：200px; 溢出：滾動; 「你們都準備好了。語義上不會是真正無瑕疵的，但用「display：block」包裝有時會有幫助。 – Nixter

只需將max-height: value添加到內部div的CSS中，該CSS對應於外部div的高度，以便內部div的高度將被「ceiled」。

來源

2012-11-10 01:40:41

調整有物業的div的高度「顯示：表單元格」

回答

相關問題