我有两个div,其中一个依赖于另一个。
|Second Div| |First Div|
| | | |
| | | |
| | | |
第一个div的高度定义为:
height:auto;
我的问题是如何定义第二个div高度,所以它将像第一个一样。
答案 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)
答案 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>
答案 6 :(得分:0)
答案 7 :(得分:0)
如果元素的.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;
}