首页 > 开发 > CSS > 正文

请教一下,css如何使左右两边的div高度自适应相等

2017-09-12 09:34:51  来源: 网友分享

现在有一个需求
基本结构

<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%;}