现在有一个需求
基本结构
<div class="parent"> <div> <table>....</table> </div> <div> <textarea ></textarea> </div></div>
在parent里面又两个div,左边div中表格的高度根据tr的高度撑开,tr的数量不定。右边div中textarea的高度根据左边div的自适应。现在的css
.parent{ width:800px; }div div { background: #1296db; margin-bottom:-3000px; padding-bottom:3000px; display: inline-block; height: auto; width: 50%; vertical-align: top;} textarea{ height: 100%; width: 100%;}
现在虽然左右两个div的高度看起来一样,但是右边textarea的高度并不充满div的高度。
请问一下该如何实现这个布局
解决方案
.parent{ display: flex; width:800px;} .parent div { width: 50%;}.parent textarea { box-sizing: border-box; height: 100%; width: 100%;}