调整有物业的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的高度“显示：表单元格”

回答

相关问题