< div>占据父母的所有身高 [英] <div> take up all height of parent

查看:107
本文介绍了< div>占据父母的所有身高的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有两个并列的< div> 块包含在更大的< div> block。我想让两个子< div> 块中较小的一个占用父块的所有剩余垂直空间,而不必真正知道父块的高度。 / p>

这是否可以不使用任何Javascript?



在此示例中: http://jsfiddle.net/5J8Em/2/ 我想要红色< div>

解决方案

尝试使用 display:code>表; 为父元素和 display:table-cell; for children:



HTML

 < div id =a> 
< div id =b>
hello world
< / div>
< div id =c>
hello world hello world hello world
hello world hello world hello world
< / div>
< / div>

CSS: p>

  #a {
background-color:rgb(100,100,100);
width:200px;
display:table;
}

#b {
background-color:red;
vertical-align:top;
display:table-cell;
}

#c {
background-color:blue;
width:100px;
word-wrap:break-word;
display:table-cell;
}

这里是 jsFidde 演示


I have two side-by-side <div> blocks that are both contained in a larger <div> block. I'd like the smaller of the two child <div> blocks to take up all remaining vertical space of the parent block, without actually knowing the height of the parent.

Is this possible to do without any Javascript?

In this example: http://jsfiddle.net/5J8Em/2/ I'd like the red <div> to be just as tall as the blue one.

解决方案

Try using display:table; for parent element and display: table-cell; for children:

HTML:

<div id="a">
    <div id="b">
        hello world 
    </div>
    <div id="c">
        hello world hello world hello world 
        hello world hello world hello world 
    </div>
</div>​

CSS:

#a {
     background-color:rgb(100,100,100);      
     width:200px; 
     display:table;
}

#b {
     background-color:red; 
     vertical-align:top;
     display: table-cell;
}

#c {
     background-color:blue;   
     width:100px;
     word-wrap:break-word;   
     display: table-cell;    
}

Here is the jsFidde demo

这篇关于&lt; div&gt;占据父母的所有身高的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆