Question

请看一下这个jsFiddle：http://jsfiddle.net/omarjuvera/TpWNY/#base

我希望<div class="client">“继承”<div class="contact">的高度（两个内部div都具有相同的大小）

请注意，<div class="client">或<div class="contact">上的内容会动态更改。所以，没有办法知道预定义的高度。但是，<div class="client">将始终有2或3行。

HTML

<div id="conteiner">
    <div class="client">Name: <br/>Phone:<br/>Emergency</div>
    <div class="contact">
        Contact 1<br/>
        Contact 2<br/>
        Contact 3<br/>
        Contact 4<br/>
        Contact 5<br/>
        Contact 6<br/>
        Contact 7<br/>
        Contact 8<br/>
    </div>
</div>

CSS

#conteiner {position: relative;}
#conteiner div {
    display: inline-block;
    border: 2px solid red;
    vertical-align: top;
    height: 100%;
}
#conteiner .client {
    width: 200px;
}
#conteiner .contact {
    width: 400px;
}

===编辑（2012年12月7日）===
最后的jsFiddle：http://jsfiddle.net/omarjuvera/TpWNY/
谢谢@ christofer-vilander !!!

Answer 1

就这一次，我建议你使用<table>，因为你实际上正在制作一张桌子。：）

Answer 2

如果我没错，那么你想客户端div和联系人div高度应该是一样的。

请使用以下代码： -

$(document).ready(function(){
   $('.client').height($('.contact').height());
});

如有任何帮助或疑虑，请检查并告知我们。

此致 Durgaprasad

Answer 3

height:100%;仅在父元素具有设定高度时才有效。你可以这样做：http://jsfiddle.net/TpWNY/2/

#conteiner {
    position: relative;
    height:200px;  // set height of container. 
}
#conteiner div {
    display: inline-block;
    border: 2px solid red;
    vertical-align: top;
    height: 100%;
    overflow:auto; // allow the div to scroll if necessary.
}
#conteiner .client {
    width: 200px;
}
#conteiner .contact {
    width: 400px;
}

Answer 4

如何使用display: table;和display: table-cell;并使它们像表格元素一样？

这样的事情 - demo

CSS：将div高度设置为100％

4 个答案: