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

时间:2014-11-29 11:57:42

标签: html css html5

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

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

第一个div的高度定义为:

height:auto;

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

8 个答案:

答案 0 :(得分: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/

答案 1 :(得分:1)

您可以使用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>

经过测试。

答案 2 :(得分:1)

最好的解决方案是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/

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

以下是一些教程: -

click here

查看底部的示例

答案 5 :(得分:0)

使用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

答案 6 :(得分:0)

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

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

这是JSFiddle

答案 7 :(得分:0)

如果元素的.offsetHeight设置为height,您可以使用auto获取高度。它会返回包含heightpadding的{​​{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;
}