使两个高度<div>可靠

的高度可靠。

我想创建两个高度可靠的div。如果div1 中的数据增加，很明显div1 的高度会发生变化，那么div2 的高度应该会自动变化。如何使用 HTML 和 CSS 来执行此操作？

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

虽然你已经说过你只想要 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>

在这里，我们使用 jQueryheight()方法使.div2的高度等于.div1的高度。

相关内容

最新更新

热门标签：