Question

我有两个div，其中一个依赖于另一个。

|Second Div| |First Div|
|          | |         |
|          | |         |
|          | |         |

第一个div的高度定义为：

height:auto;

我的问题是如何定义第二个div高度，所以它将像第一个一样。

Answer 1

<div class="div1">first div</div>   
<div class="div2"></div>

的CSS：

 div{display: table-cell;width: 100px;vertical-align: top}  /*display: table-cell;*/
.div1{height:auto; background:red;}
.div2{background:green;}

工作jsFiddle http://jsfiddle.net/L54xz1h9/4/

Answer 2

您可以使用java脚本执行此操作。

<div id="firstDiv">
   <!--Your contents--> 
</div>
<div id="secondDiv"> 
   <!--Your contents--> 
</div>

<script type="text/javascript">        
    document.getElementById("secondDiv").style.height = (document.getElementById("firstDiv").clientHeight - 10) + "px";
</script>

经过测试。

Answer 3

最好的解决方案是flexbox，你的元素将是相同的高度：

<强> HTML

<div class="flex-container">
  <div class="flex-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="flex-item"></div>
</div>

<强> CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
    padding: 10px
}

jsFiddle https://jsfiddle.net/242wro9e/

Answer 4

设置属性显示：table-cell;对于这两个div然后你的div的高度自动调整，所以第二个div高度，所以它将像第一个。

Answer 5

作为Bhojendra - C-Link尼泊尔已经提到使用jquery来获得第一个div的高度！

以下是一些教程： -

click here

查看底部的示例

Answer 6

使用display:table/table-cell：

.parent{
  display:table;
  width:600px; /* some value*/
  border: 1px solid black;
}

.left{
  display:table-cell;
  height: 500px; /* some value*/
  background: red;
}

.right{
  display:table-cell;
  background: blue;
}

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

JSFiddle

Answer 7

我不确定你的布局是否允许，但一个简单的解决方案是将第一个div放在第二个div中。

|Second Div |First Div||
|           |         ||
|           |         ||
|           |         ||

这是JSFiddle

Answer 8

如果元素的.offsetHeight设置为height，您可以使用auto获取高度。它会返回包含height和padding的{{1}}，因此如果存在，您可以使用border语句删除它。

try / catch

var first = document.getElementById('first');
var second = document.getElementById('second');
var h = first.offsetHeight;

try {
  h -= parseInt(getComputedStyle(first).paddingTop.slice(0, -2), 10);
  h -= parseInt(getComputedStyle(first).paddingBottom.slice(0, -2), 10);
} catch (error) {
  console.log(error);
}

try {
  h -= parseInt(getComputedStyle(first).borderTopWidth.slice(0, -2), 10);
  h -= parseInt(getComputedStyle(first).borderBottomWidth.slice(0, -2), 10);
} catch (error) {
  console.log(error);
}
second.style.height = h + 'px';

#first {
  display: inline-block;
  width: 100px;
  text-align: center;
  height: auto;
  background-color: chocolate;
  vertical-align: top;
  border: 1px solid black;
  padding: 10px;
}
#second {
  display: inline-block;
  width: 100px;
  background-color: sienna;
  vertical-align: top;
  text-align: center;
  border: 1px solid black;
  padding: 10px;
}

div高度取决于另一个div高度

8 个答案: