Question

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#left {
    float:left;
    width:180px;
    background-color:#ff0000;
    height:40px;
}
#right {
    width: 100%;
    background-color:#00FF00;
}
</style>
</head>

<body>
<div>
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>
</body>
</html>

这里我有两个div左右。左边div的高度为40px，如何使右边40px的高度，如果左边的高度改变右边的高度，也必须改变左边div的高度。

Answer 1

你可以这样做：

#div {
    display: table;
    width: 100%;
}
#left {
    width:180px;
    background-color:#ff0000;
    height:40px;
    display: table-cell;
}
#right {
    background-color:#00FF00;
    display: table-cell;
}

<div id="div">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

感谢@t.niese

Answer 2

您只需使用使用jquery

即可

<强> FIDDLE DEMO

$('#right').css('height', $('#left').height()+'px');

Answer 3

尝试Demo

#container
{
  height:40px;
}
#left {
    float:left;
    width:180px;
    background-color:#ff0000;
    height:100%;
}
#right {
    width: 100%;
    background-color:#00FF00;
    height:100%;
}

<div id="container">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>

我们怎样才能使第二个div的高度与动态的第一个div的高度相同？

3 个答案: