Question

我想创建两个div。高度可靠。如果div1中的数据增加，很明显div1的高度会改变。然后div2的高度应该自动改变。如何使用HTML和CSS来做到这一点？

Answer 1

<style media="screen">
  .rootdiv {
    width: 50%;
    display: table;
    table-layout: fixed;
  }
  .firstdiv, .seconddiv {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
  }
</style>
<div class="rootdiv">
  <div class="firstdiv">First DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst DivFirst Div</div>
  <div class="seconddiv">Second Div</div>
</div>

Answer 2

虽然你已经说过你只想在css中使用解决方案，但是如果你想使用jQuery那么它可能会有所帮助..

$(document).ready(function() {
    $('#div2').height($('#div1').height());
});

#div1, #div2 {width: 50%; background: #666; float: left;}
#div2 {background: #ccc;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
		Some content here<br /><br />
		Some content here<br /><br />
		Some content here<br /><br />
		Some content here<br /><br />
		Some content here<br /><br />
		Some content here<br /><br />
		Some content here<br /><br />
	</div>
	<div id="div2">
		Few content here
	</div>

我们使用jQuery .div2方法使.div1的高度等于height()的高度。

使两个<div>的高度可靠

2 个答案: